Content Security Policy violations when using default theme with internationalization #2293
Description
- I confirm that this is an issue rather than a question.
Bug report
Basic configuration of VuePress with default theme is compliant with my standard Content Security Policy (protection from various kind of injections):
Content-Security-Policy: default-src 'self'; script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com https://www.googleadservices.com https://www.google.com; img-src 'self' https://www.google-analytics.com https://googleads.g.doubleclick.net https://stats.g.doubleclick.net https://www.google.com https://www.google.pl; connect-src 'self' https://www.google-analytics.com; object-src 'none' Adding support for internationalization (by following the official guide) sadly generated inline styles in language picker component:
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-0EZqoz+oBhx7gF4nvY2bSqoGyy4zLjNF+SDQXGp/ZrY='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback. Steps to reproduce
- Configure CSP headers disallowing inline styles.
- Use VuePress default theme with internationalization.
What is expected?
No inline styles when using Internationalization component, to avoid CSP violation.
What is actually happening?
Inline styles are generated when using Internationalization component in default VuePress theme.
Other relevant information
- Output of
npx vuepress infoin my VuePress project:
npx vuepress info Environment Info: System: OS: Windows 10 10.0.18363 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Binaries: Node: 12.16.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.449.0 npmPackages: @vuepress/core: Not Found @vuepress/theme-default: Not Found vuepress: ^1.4.0 => 1.4.0 npmGlobalPackages: vuepress: Not Found Live site where problem was observed: https://lancea.pl/
Localization definition in config.js:
module.exports = { locales: { '/': { lang: 'pl', title: 'Lancea', description: 'Lancea oferuje usługi z zakresu bezpieczeństwa informacji. Audyty, szkolenia, wdrożenia, doradztwo. ISO 27001, ISO 27005, GDPR / RODO, DPIA, BIA, BCP/DR, analiza ryzyka.' }, '/en/': { lang: 'en', title: 'Lancea', description: 'Lancea offers information security services. Audits, trainings, implementations, consulting. ISO 27001, ISO 27005, GDPR / RODO, DPIA, BIA, BCP / DR, risk analysis.' } }, themeConfig: { search: false, sidebar: false, logo: '/logo.svg', locales: { '/': { selectText: 'Język', label: 'Polski', nav: [ { text: 'Strona Główna', link: '/' }, { text: 'Usługi', link: '/services/' }, { text: 'O nas', link: '/about/' }, { text: 'Kontakt', link: '/contact/' } ] }, '/en/': { selectText: 'Language', label: 'English', nav: [ { text: 'Main Page', link: '/en/' }, { text: 'Services', link: '/en/services/' }, { text: 'About', link: '/en/about/' }, { text: 'Contact', link: '/en/contact/' } ] } } } }