Docusaurus: Allow adding attributes to import of scripts and styles

Created on 12 Jul 2018 · 9Comments · Source: facebook/docusaurus

🐛 Bug Report

I get an error when loading scripts from a CDN because there is no hash set to the CDN Url. This could be fixed by giving more options to the scripts-array in the config:

Additionally this would add support for async and deferattributes

const config = {
  scripts: [
    {
      src: "https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js",
      integrity: "sha256-/SEQTcl9tvyYDA8SuhV/PMn92shN3kNn8C9vnbBcE9Y=",
      crossorigin: "anonymous",
      async: true
    },
    "../js/theme.js",
  ]
};

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

new Docusaurus
add CDN script
run locally
see the console

Expected behaviour

no error in the console

(Write what you thought would happen.)

Actual Behavior

Error in the console:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src https:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

(Write what happened. Add screenshots, if applicable.)

Reproducible Demo

https://hastebin.com/elawucenon.js

bug good first issue help wanted

Source

muuvmuuv

Most helpful comment

@muuvmuuv I can't reproduce the issue using your example scripts (they all load as expected), but this is still a good feature to have.

@endiliey can I claim this? I think a simple check of if source is an Object, and simply spreading the object key/values as attributes would be sufficient, unless you would prefer whitelisting only the valid script tag attributes.

this.props.config.scripts.map(source => {
  if (source instanceof Object) {
    return <script type="text/javascript" key={source.src} {...source} />;
  }

  return <script type="text/javascript" key={source} src={source} />;
});

helloworld on 22 Jul 2018

👍2

All 9 comments

@muuvmuuv I can't reproduce the issue using your example scripts (they all load as expected), but this is still a good feature to have.

this.props.config.scripts.map(source => {
  if (source instanceof Object) {
    return <script type="text/javascript" key={source.src} {...source} />;
  }

  return <script type="text/javascript" key={source} src={source} />;
});

helloworld on 22 Jul 2018

👍2

@helloworld it's yours!

I've added an "issue-claimed" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

I'll check in with you periodically so that we can keep the task updated with the progress.

yangshun on 22 Jul 2018

@helloworld maybe it is just a problem of my local running environment. But yes would anyway a good feature. I‘m looking forward to see this in the next updates

_{Sent with GitHawk}

muuvmuuv on 22 Jul 2018

@helloworld still working on this ?

endiliey on 28 Aug 2018

@wszgxa sure 👍. Send a PR in

endiliey on 1 Sep 2018

👍1

@wszgxa it's yours!

I've added an "issue: claimed" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

I'll check in with you periodically so that we can keep the task updated with the progress.

yangshun on 2 Sep 2018

@endiliey This appears to be available again. Can I snag it? Should have some time this weekend.