안전하지 않은 인라인 JavaScript/CSS 코드 없이 React를 사용하는 방법

안전하지 않은 인라인 JavaScript/CSS 코드 없이 React를 사용하는 방법

배경

리액트 응용 프로그램에 콘텐츠보안 정책을 사용해야 합니다.

그러나 여기서 큰 문제가 되지 않는 이유는 WebExtension/Browser Extension/add-on을 만들고 있는데 이러한 콘텐츠 보안 정책을 가지고 있기 때문입니다.'unsafe-eval'그리고.'unsafe-inline'는 엄격히 허용되지 않습니다.

CSP에 'syslog-eval', 'syslog-val', 'syslog', 리모트스크립트, blob, 또는 리모트소스를 포함한 내선번호는 중대한 보안 문제로 인해 addons.mozilla.org에 리스트 되어 있는 내선번호에는 사용할 수 없습니다.

앱은 다음과 같이 만들었습니다.create-react-app이 가이드에 따라 느슨하게 합니다.여기서 WebExtensions의 기본 CSP 또는 최소한 사소한 조정만으로 react를 사용할 수 있습니다.

단, (이렇게 엄격한) CSP는 보안상의 이유로 실제로 "일반" 웹사이트에서도 사용해야 합니다.따라서 이 질문은 애드온 제조사만을 대상으로 하는 것이 아닙니다.

문제

하지만 내가 달릴 때npm run build생성된index.html충분한 인라인 JS 코드가 포함되어 있습니다.

질문.

이 작업을 수행하지 않도록 어떻게 설정/사용 대응해야 합니까?

1. 대신 모든 JS/CSS 코드를 별도의 파일에 넣을 것인가?
2. 명사나 CSP가 허용하는 다른 것을 추가할 수 있습니까?
3. 아니면 비슷한 방법으로 그 문제를 해결할 수 있을까요?

편집

실제로 개발 버전(실행 시 작성)인 것 같습니다.npm start에는 이러한 최소값이 없습니다.거기서 파일을 취득하는 방법에 대해서, 다른 질문을 했습니다.최소화 없이 React의 실제 버전을 구축하는 방법은 무엇입니까?

사실 @heyimalex 덕분에 저는 제 문제에 대한 매우 쉬운 답을 찾았습니다.빌드 스크립트를 다음과 같이 실행합니다.

INLINE_RUNTIME_CHUNK=false npm run build

그 후 CSP와 호환됩니다.

문제가 있는 사람INLINE_RUNTIME_CHUNK=falseWindows 시스템에서 인식되지 않는 명령어를 사용하여 빌드 상에서 인라인 청크를 방지하기 위해 명령을 실행하는 적절한 방법은 다음과 같습니다.

set "INLINE_RUNTIME_CHUNK=false" && react-scripts build

패키지로 실행할 스크립트를 만듭니다.json 파일.

"scripts": {
    "build": "set \"INLINE_RUNTIME_CHUNK=false\" && react-scripts build"
  }

INLINE_RUNTIME_CHUNK에 대한 따옴표는 Windows 기본 명령줄에서 명령어가 실행되는 경우에도 필요합니다.

리눅스의 경우 승인된 답변을 따를 수 있습니다.

더 나은 방법

명령 실행에 대해 걱정할 필요가 없도록 환경 변수를 사용하십시오.

.env 파일을 만들고 INLINE_RUNTIME_CHUNK=false를 추가합니다.

언급URL : https://stackoverflow.com/questions/55160698/how-to-use-react-without-unsafe-inline-javascript-css-code