max-mapper / max-mapper/requirebin

<script> & <link> tags are ignored (possible solution included)

Open
#116 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
389
Forks
73
PR merge metrics
No merged PRs in 30d

Description

Working with this gist: http://requirebin.com/?gist=01274d1e3cd82fa3d12cdb6466f42106

First off, this is an awesome tool! Thank you for giving me such a great head start on my own project.

I was fooling around locally with the project, specifically the `` area of the app and attempted to place a `` and a `` tag in it. I was expecting the `<link>` tag (pointing to a Google Font) to work, and expecting the `<script>` tag to fail since there is no "some-library.js" on requirebin's servers.

Instead, I saw no attempt to download those assets from within Chrome (51) DevTool's Network tab. It was like the tags were being ignored completely.

After some searching, I found that I was able to get it to work by adjusting [iframe's source code](https://github.com/npm-dom/iframe/blob/master/index.js#L46) (project is depended on from requirebin and [browser-module-sandbox](https://github.com/maxogden/browser-module-sandbox)), changing:

`tempIframe.src = targetUrl`
to
`tempIframe.srcdoc = opts.html`

It seems that Chrome didn't like the [created Blob URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL). Using `srcdoc` instead seemed to work. I doubt this is a very clever solution, and welcome any comments to this issue.

Mind you, I intend to fork this project to suit my own needs, so I'm not sure if this is even an appropriate issue to report. But I figured I'd raise it in case anyone else experienced similar issues.

Thanks!
Tim

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the behavior with the linked RequireBin gist and inspect iframe/index.js around the referenced source assignment, along with the browser-module-sandbox dependency. Compare the Blob URL approach with the reported srcdoc behavior in Chrome DevTools' Network tab. Done means the HTML head's link and script tags are processed as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.