langchain-ai/langgraphjs
1
0
Fork 0
mirror of https://github.com/langchain-ai/langgraphjs.git synced 2026-07-22 17:15:25 -04:00
Code Issues 108 Packages Projects Releases 20 Wiki Activity

Mixed Content Issues: Script and Stylesheet URLs #347

New Issue
Closed
opened 2026-02-15 18:16:05 -05:00 by yindo · 1 comment
yindo commented 2026-02-15 18:16:05 -05:00
Owner
Copy Link
Copy Source

Originally created by @miriyald on GitHub (Aug 25, 2025).

Checked other resources

  • I added a very descriptive title to this issue.
  • I searched the LangGraph.js documentation with the integrated search.
  • I used the GitHub search to find a similar question and didn't find it.
  • I am sure that this is a bug in LangGraph.js rather than my code.
  • The bug is not resolved by updating to the latest stable version of LangGraph (or the specific integration package).

Example Code

Request
Image
Response:

Image

Error Message and Stack Trace (if applicable)

No response

Description

I Deployed by langraph with ui components as https://

But I was not able to see the ui components rendering on UI on futurther investigation found that Langgrpah Chat UI is returing the http script url instead of https://

Description

The following lines in libs/langgraph-api/src/ui/load.mts currently hardcode the HTTP protocol for script and stylesheet resources:

<script src="http://${host}/ui/${agent}/${js.basename}" ...>
<link rel="stylesheet" href="http://${host}/ui/${agent}/${css.basename}" ...>
`

When the application is served over HTTPS, browsers block these resources due to mixed content restrictions. This breaks UI functionality.

Recommended Solution

Instead of hardcoding http://, use the protocol from the incoming request context (c.req.proto). This ensures the generated URLs are always consistent with the request's protocol and avoids mixed content issues.

Example Fix

const protocol = c.req.proto; // 'http' or 'https'
const scriptUrl = `${protocol}://${host}/ui/${agent}/${js.basename}`;
const stylesheetUrl = `${protocol}://${host}/ui/${agent}/${css.basename}`;

Update the template tags:

`<script src="${protocol}://${host}/ui/${agent}/${js.basename}" ...>`
`<link rel="stylesheet" href="${protocol}://${host}/ui/${agent}/${css.basename}" ...>`

Impact

  • Prevents browsers from blocking resources when served over HTTPS
  • Ensures UI loads correctly in secure contexts
  • Follows best practices for protocol handling in server-side rendered templates

References:

System Info

NA
All Platforms.

Originally created by @miriyald on GitHub (Aug 25, 2025). ### Checked other resources - [x] I added a very descriptive title to this issue. - [x] I searched the LangGraph.js documentation with the integrated search. - [x] I used the GitHub search to find a similar question and didn't find it. - [x] I am sure that this is a bug in LangGraph.js rather than my code. - [x] The bug is not resolved by updating to the latest stable version of LangGraph (or the specific integration package). ### Example Code Request <img width="1772" height="204" alt="Image" src="https://github.com/user-attachments/assets/b68ac8c4-e6c5-4ba2-8e1b-4ad2333b348d" /> Response: <img width="3432" height="166" alt="Image" src="https://github.com/user-attachments/assets/25815183-1c3d-4489-a159-8cc79435811e" /> ### Error Message and Stack Trace (if applicable) _No response_ ### Description I Deployed by langraph with ui components as `https://` But I was not able to see the ui components rendering on UI on futurther investigation found that Langgrpah Chat UI is returing the http script url instead of https:// ### Description The following lines in `libs/langgraph-api/src/ui/load.mts` currently hardcode the HTTP protocol for script and stylesheet resources: ```typescript <script src="http://${host}/ui/${agent}/${js.basename}" ...> <link rel="stylesheet" href="http://${host}/ui/${agent}/${css.basename}" ...> ` ``` When the application is served over HTTPS, browsers block these resources due to mixed content restrictions. This breaks UI functionality. ### Recommended Solution Instead of hardcoding `http://`, use the protocol from the incoming request context (`c.req.proto`). This ensures the generated URLs are always consistent with the request's protocol and avoids mixed content issues. #### Example Fix ```typescript const protocol = c.req.proto; // 'http' or 'https' const scriptUrl = `${protocol}://${host}/ui/${agent}/${js.basename}`; const stylesheetUrl = `${protocol}://${host}/ui/${agent}/${css.basename}`; ``` Update the template tags: ```typescript `<script src="${protocol}://${host}/ui/${agent}/${js.basename}" ...>` `<link rel="stylesheet" href="${protocol}://${host}/ui/${agent}/${css.basename}" ...>` ``` ### Impact - Prevents browsers from blocking resources when served over HTTPS - Ensures UI loads correctly in secure contexts - Follows best practices for protocol handling in server-side rendered templates --- **References:** - [MDN: Mixed content](https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content) - Source code: [load.mts#L51](https://github.com/langchain-ai/langgraphjs/blob/main/libs/langgraph-api/src/ui/load.mts#L51) ### System Info NA All Platforms.
yindo closed this issue 2026-02-15 18:16:05 -05:00
yindo commented 2026-02-15 18:16:06 -05:00
Author
Owner
Copy Link
Copy Source

@dqbd commented on GitHub (Sep 4, 2025):

Hello! In general browsers do not allow loading assets served behind HTTP on HTTPS websites. For that you'll need either:

  1. clone Agent Chat UI locally,
  2. use HTTPS proxy or Cloudflare Tunnels by running CLI like so: npx @langchain/langgraph-cli dev --tunnel
  3. or deploy the graph with UI components via LangGraph Platform

With #1608, we'll stop assuming http:// for frontends served outside localhost, but you'll need to serve the dev server with HTTPS to load those assets correctly.

@dqbd commented on GitHub (Sep 4, 2025): Hello! In general browsers do not allow loading assets served behind HTTP on HTTPS websites. For that you'll need either: 1. clone Agent Chat UI locally, 2. use HTTPS proxy or Cloudflare Tunnels by running CLI like so: `npx @langchain/langgraph-cli dev --tunnel` 3. or deploy the graph with UI components via LangGraph Platform With #1608, we'll stop assuming `http://` for frontends served outside localhost, but you'll need to serve the dev server with HTTPS to load those assets correctly.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
checkpointer
docs-needed
documentation
enhancement
good first issue
good writeup
help wanted
invalid
langgraph-supervisor
open-swe-auto
platform
prebuilt
pull-request
Mirrored from GitHub Pull Request
 question
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langchain-ai/langgraphjs#347
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?