Script Tag Attributes #687

Closed
jordandh opened this Issue Mar 25, 2013 · 14 comments

Projects

None yet

6 participants

@jordandh

I have a need to add attributes to the script tags created by requirejs when it includes a module.

For example we host our javascript files on a cdn. When an error occurs in the javascript that is handled by the window.onerror function you get a cryptic "Script Error." message. Clearly that is not useful. This is a security feature for scripts that are not hosted on the same domain as the page. In our case we know we can trust the file from our cdn. And by adding the crossorigin attribute to a script tag along with setting up proper cors headers on our cdn the browser will give us the actual error instead of the cryptic one.

Can support be added to the library for adding custom attributes to the generated script tags?

@jrburke
Member
jrburke commented Mar 27, 2013

requirejs.load returns the script node used to add the script (if it is not in a worker). The suggestion is to override requirejs.load(), call the old version, grab the return node and do what you want with it there.

@jrburke jrburke closed this Mar 27, 2013
@jordandh

Thanks James,
I thought there might be a recommended method for doing this but couldn't find anything in the docs.

@jrburke
Member
jrburke commented Mar 27, 2013

I should have also mentioned that requirejs.load is a semi-private API -- it is subject to change later. I do not have plans to change it, but also will not worry about changing it later if I need to. For that reason, I keep it out of the docs.

@jordandh

I just took a look at the requirejs.load function and I am a little concerned that adding the crossorigin attribute to the script after it has already been added to the dom might not work. I have nothing to back this up though. It would be prudent of me to create some tests to find out the behavior. If I do get around to it I will post my results here.

@marc-mabe

I have the same issue and the return value of requirejs.load doesn't help because it was already added to the DOM.

Within the load function I found already 2 configuration options scriptType and xhtml. In my opinion the creation of the script tag (without adding to DOM) should be one function. This can be overwritten in the following cases:

  • use XHTML namespace
  • change script type
  • change charset
  • add additional attributes (like the attribute crossorigin)

the load function itself should call this function and set requirejs specific properties / attributes like src, add events and insert into the DOM.

@jrburke
Member
jrburke commented Jun 26, 2013

This used to be two different calls, but consolidated for space concerns, and the node creation did not make sense when requirejs.load was overridden to operate in non-browser environments.

The goal behind using script tags in general though for AMD modules is that it avoids cross origin issues since script tags work across domains. When looking up crossorigin for script tags it just sees to allow for better error messages?

It is not clear to me how that is useful in terms of module/script fetching -- maybe just for error reporting pathways?

@marc-mabe

@jrburke Yes, it is for error reporting using window.onerror. The issue is that if an error accrues
within a script loaded from a different origin this event only informs you about an undefined error anywhere within the script. It's not only for errors first executing the script on load but on all errors triggered within this script.

Now if you won't to log all errors in production you listen to the event and send it to a logging server but you only get noted there was an error within a script (URL). The script could be optimized by r,js (like main.js). It's the same as someone tells you about an error within your application but doesn't describe it - not helpful.

If you add crossorgin="anonymous" and the response the JS file was loaded from sends an Access-Control-Allow-Origin: * you get noted about the real error message and the line of the file and the column the error accrues.

If you add crossorgin="anonymous" and the response doesn't contain Access-Control-Allow-Origin: * the browser will block the script.

More to read about:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-February/034969.html

PS: Within my tests I couldn't make it work with standard CORS checks only (FF 21, Chrome).

@jrburke
Member
jrburke commented Jun 27, 2013

OK, I'll look at providing a hook that is sooner, break up requirejs.load into two things.

@jrburke jrburke reopened this Jun 27, 2013
@claytonfbell

I have the exact same issue. It would be awesome to have crossorgin="anonymous" optionally added to the script tags when loading scripts from CDN. Then I could display and send helpful error reports to a server.

@jrburke jrburke closed this in 1d5a1f8 Jul 7, 2013
@jrburke
Member
jrburke commented Jul 7, 2013

In 2.1.7, there will be a requirejs.createNode that can be used to modify the node before the URL and event listeners are added to it, and before it is added to the DOM.

@jordandh
jordandh commented Jul 7, 2013

That's great. Thanks James.

@App3x
App3x commented Aug 22, 2013

why don't just add config param with additional tag attribute - values?

@jrburke
Member
jrburke commented Aug 28, 2013

@app3x if this kind of capability is needed, the hook provides the most flexibility: other event handlers can be added, or specific attributes based on the module ID or URL can be attached. I expect the majority of users will not be using this feature too.

@davidminor

If I'm using var require = { ... } to specify some dependencies to be initially loaded, is there a way to use this hook when loading those dependencies?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment