最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How do I set up helmet.js correctly to resolve CSP issue? - Stack Overflow

programmeradmin1浏览0评论

When I start my express app the browser gives me this error:

Refused to load the script 'http://localhost:1337/main.js' because it violates
the following Content Security Policy directive: "script-src unsafe-eval".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

In my index.js file I have set helmet up like so:

// Set Content Security Policies
const scriptSources = ["'self'", "'unsafe-inline'", "'unsafe-eval'"];
const styleSources = ["'self'", "'unsafe-inline'"];
const connectSources = ["'self'"];

app.use(
  helmet.contentSecurityPolicy({
    defaultSrc: ["'self'"],
    scriptSrc: scriptSources,
    scriptSrcElem: scriptSources,
    styleSrc: styleSources,
    connectSrc: connectSources,
    reportUri: '/report-violation',
    reportOnly: false,
    safari5: false  
  })
);
app.use(helmet({
  contentSecurityPolicy: false,
}));

and my index.html is loading in the .js file like this:

<script type="module" src="./main.js"></script>

Here is my GitHub Repo: .pw

When I start my express app the browser gives me this error:

Refused to load the script 'http://localhost:1337/main.js' because it violates
the following Content Security Policy directive: "script-src unsafe-eval".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

In my index.js file I have set helmet up like so:

// Set Content Security Policies
const scriptSources = ["'self'", "'unsafe-inline'", "'unsafe-eval'"];
const styleSources = ["'self'", "'unsafe-inline'"];
const connectSources = ["'self'"];

app.use(
  helmet.contentSecurityPolicy({
    defaultSrc: ["'self'"],
    scriptSrc: scriptSources,
    scriptSrcElem: scriptSources,
    styleSrc: styleSources,
    connectSrc: connectSources,
    reportUri: '/report-violation',
    reportOnly: false,
    safari5: false  
  })
);
app.use(helmet({
  contentSecurityPolicy: false,
}));

and my index.html is loading in the .js file like this:

<script type="module" src="./main.js"></script>

Here is my GitHub Repo: https://github./jgonzales394/fsn.pw

Share Improve this question asked Nov 10, 2020 at 2:45 jgonzales394jgonzales394 991 gold badge1 silver badge6 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

Helmet maintainer here. This is happening because your directives need to be nested under a directives property.

For example:

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: scriptSources,
      // ...
    },
  })
)

Ok so I managed to get it working correctly. Helmet is allowing me to set my CSP this way:

app.use(
  helmet.contentSecurityPolicy({
    defaultSrc: ["'self'"],
    scriptSrc: scriptSources,
    scriptSrcElem: scriptSources,
    styleSrc: styleSources,
    connectSrc: connectSources,
    reportUri: '/report-violation',
    reportOnly: false,
    safari5: false  
  })
);

So my main.js file is a vue app and I had it written like this before:

import * as Vue from './src/vue.esm-browser.js';

const App = Vue.createApp({
  data() {
    return {
      slug,
      url
    }
  },
  methods: {
    createUrl() {
      console.log(this.slug, this.url);
    }
  }
}).mount('#app');

I rewrote the code like this:

import { createApp, ref } from './src/vue.esm-browser.js';

const slug = ref('');
const url = ref('');

createApp({
 setup() {
   const createUrl = () => {
     console.log(slug.value, url.value);
   };

   return {
     slug,
     url,
     createUrl
   };
 }
}).mount('#app');

and in my html file is was able to call createUrl without invoking it.

Ok, so I had a similar issue. This was resolved when I nest the directive but not the report to as such

app.use(helmet({
    contentSecurityPolicy: {
        directives: {
          "script-src":['self',"http://localhost:3000/"],
        },
        reportOnly:true
      },
}))
发布评论

评论列表(0)

  1. 暂无评论