TLDR: I made this Netlify plugin for CSP. You should give it a try.

당신에게 피/blocked:csp를 뱉는 완전한 분노의 개발 도구를 본 적이 있습니까?



아니? 글쎄요. 이는 이전에 웹사이트에서 적어도 Content-Security-Policy를 설정하려고 시도했음을 의미하기 때문입니다.

콘텐츠 보안 정책을 설정하는 것은 XSS 공격을 방지하는 데 필수적입니다. 이는 XSS was responsible for 40% cyber attacks in 2019 때문에 큰 문제입니다.

그러나 설정하는 것이 항상 재미있는 것은 아닙니다. Gridsome 에 Netlify 과 같은 것을 사용하는 경우 Content-Security-Policy 의 헤더에 netlify.toml 키를 추가하는 것만으로는 해결할 수 없는 두 가지 주요 문제에 직면하게 됩니다.

Gridsome(및 Gatsby)은 큰<script></script> 블록인 초기 상태를 인라인합니다.

Vue는 v-show와 같은 style="display:none;"에 대해 인라인 스타일을 사용합니다.

이 두 가지 모두 CSP 규칙에 의해 차단되는데, 웹사이트에 임의의 스크립트가 추가되거나 스타일이 엉망이 되는 것을 원하지 않기 때문에 좋습니다(예를 들어 누군가 다른 링크를 '지금 지불' 버튼으로 스타일링).

이 문제를 해결하려면 인라인 스크립트의 암호화 해시를 생성해야 합니다. 그러면 브라우저가 이것이 정상이고 변조되지 않았음을 알 수 있습니다. 온라인으로 검색하면 unsafe-inline 를 사용하는 것과 같이 일부 bad advice 을 찾을 수 있습니다. ( Bad! Bad! saith the buyer ...)

Netlify를 사용하는 경우 this amazing package I made earlier을 사용하여 sha256 헤더에 대한 인라인 스크립트 및 스타일의 해시Content-Security-Policy를 생성할 수 있습니다. Github 저장소로 이동하여 Netlify 프로젝트에서 사용해 보세요.

MarcelloTheArcane / netlify-플러그인-csp-생성기

인라인 스크립트 해시에서 CSP 헤더 생성

netlify-플러그인-csp-생성기

Generate Content-Security-Policy headers from inline script and style hashes

Gatsby 또는 Gridsome 과 같은 것을 실행할 때 초기 상태는 <script> 태그 안에 저장됩니다.
최신 브라우저 콘텐츠 보안 정책은 인라인 스크립트나 스타일을 좋아하지 않으므로 이 문제를 해결하려면 각 스크립트의 cryptographic nonce 또는 cryptographic hash을 추가해야 합니다.
nonce는 로드할 때마다 업데이트할 수 없기 때문에 문제가 되지 않습니다.
이 패키지는 각 HTML 파일에 있는 모든 인라인 스크립트 및 스타일의 암호화 해시(SHA-256)를 생성하고 선택한 다른 정책과 함께 _headers 파일에 추가합니다.

Note
Netlify lets you add a Content-Security-Policy header in your netlify.toml. This will overwrite values inside _headers, so don't do that.

기존_headers 파일이 있는 경우 기존 파일에 추가됩니다. 파일이 끝나는지 확인하십시오…

View on GitHub

Netlify를 사용하지 않는다면 스스로 알아서 해야 합니다. 미안합니다.


웹사이트에서 XSS 취약점을 확인하고 싶습니까? 브라우저 콘솔에서 다음을 실행하십시오.

const script = document.createElement('script')
script.innerHTML = 'alert("hacked!")'
document.body.appendChild(script)

😱