Frame is not loading scriopts and css for chat

Forge
1

I am using Custom UI to make my forge app and in frame fetching a url.
<iframe style={{margin:'0px',width:'100%',height:'600px'}} src={externalContentUrl}></iframe>
const externalContentUrl =${baseUrl}/xxxx/xxxx/xxxx.xx.webchat?isJira=true&jiraDomain=${encodeURIComponent(‘https://xxxxxxxxxxwrkspacesks.atlassian.net’)}&issueId=${encodeURIComponent(‘AG-1’)}&cardWidth=${430};
The problem is what is returned is just the html not scripts and the css. It lloks something like this:

image
image736×750 28.9 KB

What am i doing wrong ??
This is my manifest.yml file…

modules:
  jira:issueContext:
    - key: agent-assist-five-hello-world-context
      resource: main
      resolver:
        function: resolver
      title: Agent Assist
      label: Custom UI
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/hello-world/build
permissions:
  external:
    frames:
      - 'https://xxxx.xxxx.ai/api/hook/xxxx.xxxx.webchat'
    styles:
      - 'https://fonts.googleapis.com/*'
      - 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'  # Font Awesome
    images: 
      - 'https://i.ibb.co/*'
      - 'https://xxxxx-xxxxx.s3.amazonaws.com/*'
    
    scripts:
      - 'https://xxxxxxx.xxxxx.ai/xxxxx/js/w.js' 
      - 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js'  # Socket.io
    fetch:
       backend:
          - 'https://xxxx.xxx.ai' 
  content:
    styles:
      - 'unsafe-inline'
                    
app:
  runtime:
    name: nodejs20.x
  id: ari:cloud:ecosystem::app/7a7a91f7-8ddd-4549-882a-e624613eaedf
2

image
image1741×611 57.9 KB

These errors are in the console

3

Try with those permissions

permissions:
  content:
    scripts:
      - 'unsafe-inline'
      - 'unsafe-eval'
      - 'unsafe-hashes'
    styles:
      - 'unsafe-inline'

:slight_smile:

4

My suggestion is to determine: “Is this issue related to permissions or not?”
To do this:

  1. Apply “ALLOW ALL” permissions (do not use this in production; only for analysis):
  content:
    scripts:
      - unsafe-inline
      - unsafe-hashes
      - unsafe-eval
    styles:
      - unsafe-inline
  external:
    images:
      - "*"
    scripts:
      - "*"
    styles:
      - "*"
    fonts:
      - "*"
    frames:
      - "*"
    media:
      - "*"
    fetch:
      backend:
        - "*"
      client:
        - "*"
  1. Deploy to the development environment, install with upgrade, and allow new permissions.
  2. Test your app again. If it works fine, the issue is NOT related to permissions.
5

image
image1097×598 31.1 KB

Did it, Still same
image
image938×752 9.66 KB

@AndreiPisklenov what might be the issue?
The endpoint i am calling to , dynamically generates html and js and css…

In your endpoint response for the iframe, you're dynamically generating HTML that includes inline styles and scripts:

javascript
Copy code
const html = `<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  ...
  <style>${clintStyle}</style>
</head>
<body>
  ...
  <script type="text/javascript" defer>${clintScript}</script>
</body>
</html>`;

What might be the isssue?

6

Great! If you remembered to redeploy the app, install it with the update, restart the tunnel, and reset the browser cache, it’s most likely not a security issue.
Try investigating other areas to locate the real problem. For example, insert a different iframe to check if it’s an issue with that specific iframe or if the embedded content itself is causing the problem:

<iframe width="640" height="480" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=Jh77JtJ-IGQkLz5T" title="YouTube video player" frameBorder="0"></iframe>
7

figured out i weas serving that response from backend …but forgot to update nginx proxy settings for my route .

1 Like