Sweetalert: 콘텐츠 보안 정책 호환성

삽입된 인라인 스타일을 실행하려면 'unsafe-inline'(따옴표 주의)을 포함해야 하는 style-src 지시문을 수용하도록 Content-Security-Policy 값을 업데이트해야 합니다.

개발자에게 CSS에 대해 unsafe-inline 정책을 사용하도록 강요하는 것은 확실히 이상적이지 않습니다. 우리는 이것을 처리하는 더 나은 방법을 찾아야 할 것입니다.

한 가지 방법은 코드 내에서 CSS 파일을 가져오지 않고 개발자 코드 내에서 가져올 수 있는 별도의 파일로 사용할 수 있도록 하는 것입니다. 같은 것
import 'sweetalert/sweetalert.css
이런 식으로 CSP를 위반하지 않는지 확인하는 것은 개발자의 책임입니다.

CSS 파일이 있는 위치와 (거의) 아무 관련이 없습니다(CSS가 동일한 도메인에 있는 한). Sweetalert _injects_ 인라인 CSS , nonce/hash 값이 없는 한 가질 가치가 있는 CSP는 허용하지 않습니다. 오늘 아침에 끝이 없는 고통을 겪고 있습니다. 내 프로젝트에서 연결을 해제해야 할 수도 있습니다. 이는 제가 정말 좋아하기 때문에 부끄러운 일입니다.

이에 대한 업데이트가 있었습니까? 같은 문제가 있습니다. 이 문제를 해결하는 가장 좋은 방법이 무엇인지 궁금하십니까?

해결 방법은 Content-Security-Policy 헤더에 해시를 추가하는 것입니다.

같은 것

style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-wTr/bct+DGhJCU0mVZOm9Z1v99oBZrIu4VCMYQJWdfI=';

이상적이지는 않지만 unsafe-inline 보다 낫습니다. 문제는 파일이 변경되면 해시가 더 이상 일치하지 않고 브라우저에서 거부한다는 것입니다.

이상적인 상황은 CSS를 자체 파일로 추출하고 CDN에서 호스팅하는 것입니다. 그렇게 하면 파일을 화이트리스트에 추가할 수 있습니다.

CSS 파일이 있는 위치와 (거의) 아무 관련이 없습니다(CSS가 동일한 도메인에 있는 한). Sweetalert _injects_ 인라인 CSS , nonce/hash 값이 없는 한 가질 가치가 있는 CSP는 허용하지 않습니다. 오늘 아침에 끝이 없는 고통을 겪고 있습니다. 내 프로젝트에서 연결을 해제해야 할 수도 있습니다. 이는 제가 정말 좋아하기 때문에 부끄러운 일입니다.

여기도 마찬가지.

Chrome의 sweetalert.min.js에서 두 개의 인라인 스타일 해시를 얻을 수 있습니다. CSP 헤더에 추가되면 Chrome은 더 이상 불평하지 않습니다.
그러나 Firefox와 Safari는 여전히 불평하고 적절한 해시를 찾을 수 없습니다. 이러한 브라우저는 힌트를 제공하지 않습니다.
파이어폭스: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”)
사파리: Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear in the style-src directive of the Content Security Policy.