Pdf.js: [email protected]의 안전하지 않은 인라인에 대한 CSP 위반

v2.2.228 이 행은 정책을 위반했습니다. Function("r", "regeneratorRuntime = r")(runtime);

이는 실제로 PDF.js 라이브러리 자체 내에서 시작된 코드가 아니라 이전 브라우저에서 async / await 를 지원하는 데 필요한 Babel 폴리필에서 가져옵니다. 따라서 불행히도 여기 에 대해 무엇을 할 수 있는지 명확하지 않습니다.

예, 대신 업스트림에 보고해야 한다고 생각합니다.

@timvandermeij pdf.js의 코드는 polyfill이 필요하지 않도록 작성할 수 있습니다.
@Snuffleupagus 볼만한 whta 파일에 대한 힌트가 있습니까?

더 깊이 들여다보았습니다. 기회 없음 :-(

다음은 regenerator-runtime/runtime.js 문제입니다.

동일한 문제가 여기에 있습니다.

@Snuffleupagus 2개의 개별 파일을 하나는 이전 브라우저용으로, 다른 하나는 에버그린 브라우저용으로 배포할 수 있습니까?

추적할 업스트림 문제가 있습니까? 현재 동일한 문제에 직면

https://github.com/facebook/regenerator에 문제를 보고할 수 있습니다

pdf.js 작성자가 여기에서 이 문제를 수정한 것 같습니다.

https://github.com/facebook/regenerator/pull/353

그러나 babel의 문제로 인해 롤백해야했습니다.

https://github.com/facebook/regenerator/pull/369

여기에 교착 상태가 있는 것 같습니다. 여기에 세 가지 솔루션이 있습니다.

• facebook/regenerator 이 문제를 해결할 때까지 기다리십시오.
  가장 명확할 수 있지만 많은 사용자가 pdf.js의 이전 버전을 고수할 것입니다.
• facebook/regenerator 다운그레이드(바벨도 다운그레이드해야 함)
• 현재 ES5에 추가로 facebook/regenerator 가 필요하지 않은 pdf.js의 에버그린(ES2016+) 버전을 제공합니다. (현재 많은 웹 애플리케이션이 ES5와 호환될 필요가 없습니다).

어쨌든 여기에 잘 문서화 된 CSP 위반
https://github.com/facebook/regenerator/blob/6e9e8d7747c2ab49927bdd9dd6261753181faec1/packages/regenerator-runtime/runtime.js#L716 -L725

  // This module should not be running in strict mode, so the above
  // assignment should always work unless something is misconfigured. Just
  // in case runtime.js accidentally runs in strict mode, we can escape
  // strict mode using a global Function call. This could conceivably fail
  // if a Content Security Policy forbids using Function, but in that case
  // the proper solution is to fix the accidental strict mode problem. If
  // you've misconfigured your bundler to force strict mode and applied a
  // CSP to forbid Function, and you're not willing to fix either of those
  // problems, please detail your unique predicament in a GitHub issue.
  Function("r", "regeneratorRuntime = r")(runtime);

즉, CSP 위반이 있는 경우 엄격 모드에서 실행해서는 안 됩니다. 이것은 재생성 런타임에서 알려진 동작이므로 pdf.js는 엄격 모드를 꺼야 합니다.

@timvandermeij pdf.js에 할 일이 있는지 없는지 댓글 다시 읽어

여기에서 PDF.js가 다르게 할 수 있는 것이 무엇인지 잘 모르겠습니다. 주석이 명확하더라도 오류를 방지하고 최적화를 허용하기 위해 의도적으로 엄격 모드로 PDF.js를 실행합니다. 이것이 이전에 발생하지 않았고 우리가 facebook/regenerator 직접 사용하지도 않는다는 점을 감안할 때 (그러나 다른 패키지의 종속성으로만) 나는 그것들을 패치해야 한다고 말하고 싶습니다. 우리가 할 수 있는 사소한 변경이 없다면/ 우리 쪽에서 해야 하는데 그게 어떻게 될지 모르겠어...

@timvandermeij

알아봐 주셔서 감사합니다.

pdf.js의 babel 무료 버전은 어떻습니까? 최신 브라우저에는 재생성 런타임 폴리필이 필요하지 않습니다.

@jkroepke 이상적으로는 Babel을 전혀 사용하지 않을 것이지만 불행히도 현재로서는 PDF.js가 우리가 지원하는 모든 브라우저에서 작동해야 하므로 제거하는 것은 지금 고려할 수 있는 사항이 아닙니다. 물론 PDF.js를 직접 빌드하고 Babel 변환을 비활성화할 수 있습니다.

2.3.200에서도 동일한 문제가 발생합니다. 해결 방법이나 수정 사항이 있습니까? 감사 해요.

@timvandermeij

결국 pdf.js가 regenerator-runtime/babel을 사용할 때 지원되지 않는 엄격 모드를 사용하기 때문에 잘못하고 있음을 알 수 있습니다. 따라서 제한 사항이 잘 문서화되어 있기 때문에 더 이상 업스트림 문제가 아닙니다.

이 문제를 해결하기 위한 4가지 대안이 있습니다.

• 이전 버전의 babel을 사용합니다. 2.1.266 버전의 pdf.js에는 이 문제가 없습니다. 버전을 고정하면 해결됩니다. 이것이 가장 빠릅니다.
• babel의 종속성이 지원하지 않으므로 엄격 모드를 사용하지 마십시오.
• regenerator-runtime을 사용하여 트랜스파일 플러그인을 끕니다. (https://caniuse.com/#feat=es6-generators)
• 두 가지 버전의 pdfjs-dist를 제공합니다. 하나는 이전 브라우저(ES5로 변환됨)용이고 다른 하나는 현재 브라우저용입니다. (ES6으로 변환)

이전 버전의 babel을 사용합니다. 2.1.266 버전의 pdf.js에는 이 문제가 없습니다. 버전을 고정하면 해결됩니다. 이것이 가장 빠릅니다.

이전 버전에 대한 종속성을 고정하는 것은 결코 좋은 생각이

[...] (https://caniuse.com/#feat=es6-generators)

명확히 하기 위해: PDF.js 라이브러리는 (현재) 생성기 함수를 사용하지 않지만 async / await 가 사용되고 있으며 이것이 이 특정 종속성이 여기에 존재하는 이유입니다.

두 가지 버전의 pdfjs-dist를 제공합니다. 하나는 이전 브라우저(ES5로 변환됨)용이고 다른 하나는 현재 브라우저용입니다. (ES6으로 변환)

이것은 위의 제안 중에서 가장 현실적인 옵션처럼 보이지만 언제/어떻게 일어날 것인지는 현시점에서 명확하지 않습니다(PR #11241의 토론/문제 참고).
그러나 다음(일반) 빌드 유형만 제공됩니다.

• 그 시간에 할 수있는 어떤 최신 ES-{버전}과 만 호환 빌드, 즉 내장 된 파일은 바벨을 통해 실행되지 않고 polyfills은 포함되지 않습니다.
• ES5와 호환되는 빌드, 즉 빌드된 파일은 Babel에 의해 구문 분석되고 폴리필이 포함됩니다.

최신 ES-{버전}과만 호환되는 빌드

최신 2개의 주요 브라우저 버전에서 지원하는 기능/기술만 사용하시겠습니까?

최신 브라우저에서 지원하지 않는 최첨단 언어 제안 기능이 있는 버전은 도움이 되지 않습니다.

최신 2개의 주요 브라우저 버전에서 지원하는 기능/기술만 사용하시겠습니까?

그렇게 하려면 서로 다른 세 가지 유형의 빌드를 생성해야 하는데, 이는 좋은 생각이 아닌 것 같습니다. 하나는 사용자가 어떤 빌드를 사용할지 훨씬 더 혼란스러울 것입니다(사용자가 두 가지 유형의 빌드로도 확신할 수 없다고 상상하기 때문입니다). 또한, 여러 빌드를 제공하려고 하면 지원 및 유지 관리와 관련하여 소수의 일반 PDF.js 기고자에게 더 많은 부담이 가해질 것입니다.

기본적으로 내가 염려하는 한 이 경우의 바람직한 상황은 라이브러리 사용자 중 하나일 것입니다.

• ES 최신 빌드를 선택하고 지원해야 하는 플랫폼/브라우저에 따라 필요에 따라 폴리필을 제공합니다.
• ES5 빌드를 선택하고 필요한 모든 폴리필을 포함하고 "모든" 최신 브라우저와 호환되는 코드를 가져옵니다.

최신 브라우저에서 지원하지 않는 최첨단 언어 제안 기능이 있는 버전은 도움이 되지 않습니다.

역사적으로 말하자면 Firefox Nightly와 같이 기능이 제공되는 즉시 기능을 사용하기 시작했다고 생각하지 않습니다. 따라서 이것이 실제로 실제로 많은 문제가 될 것이라고는 예상할 수 없습니다.

안녕하세요,

나는 같은 문제에 부딪쳤습니다. 내가 사용한 솔루션은 재생기 런타임 을로드하는 것이 었습니다. 내 polyfill을 직접 생각했습니다.

이 방법으로 pdfjs-dist를 변경하지 않았습니다. pdfjs를 다시 컴파일하지 않고도 CSP 문제를 해결할 수 있었습니다. :)

@makidelille 각을 사용합니까?

@makidelille 각을 사용합니까?

우리는 angularjs( 여전히 )를 사용합니다.

정확히 말하면 angularjs 지시문을 통해 사용되는 pdf.js 위에 사용자 정의 뷰어를 구축했습니다.

편집: 사용자 정의 뷰어는 typescript angularjs로 빌드되므로 폴리필이 있습니다.

다음 코드 줄에서 CSS에 대한 또 다른 안전하지 않은 인라인 오류가 발생합니다.
https://github.com/mozilla/pdf.js/blob/master/web/ui_utils.js#L893

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src ...". Either the 'unsafe-inline' keyword, a hash ('sha256-MW4Iy/yu3WipUpTMM/T6OjvUu9R6vUwutodlmYNo6qM='), or a nonce ('nonce-...') is required to enable inline execution.

안녕하세요,

나는 같은 문제에 부딪쳤습니다. 내가 사용한 솔루션은 재생기 런타임 을로드하는 것이 었습니다. 내 polyfill을 직접 생각했습니다.

이 방법으로 pdfjs-dist를 변경하지 않았습니다. pdfjs를 다시 컴파일하지 않고도 CSP 문제를 해결할 수 있었습니다. :)

이 솔루션이 각도 2+로 어떻게 변환되는지 알고 있습니까? 이것을 고칠 수 있습니까?

저는 이 라이브러리를 사용하고 있으며 동일한 CSP 문제에 직면하고 있습니다(해당 프로젝트 문제 목록에서 내 티켓을 보고 싶다면). 그러나 패키지/npm/종속성 유형 항목에 대한 이러한 종류의 문제는 내가 이해하는 것이 아닙니다. 잘.

불행히도 이 문제가 없는 이전 버전의 pdfjs(위에서 언급한 2.1.266)는 이 angular 2+ 래퍼 라이브러리와 호환되지 않는 것으로 보이며 해당 버전의 pdfjs를 사용하는 버전이 없는 것으로 보입니다. 내부적으로.

편집 : 나와 비슷한 상황에 처한 사람을 위해 CSP 문제없이 저에게 도움이되는 또 다른 각도 pdfjs 래퍼 라이브러리가 있습니다. 여기를 참조

다음 릴리스 에는 두 가지 종류의 빌드가 포함되므로 이 문제는 지금 종료될 수 있다고 생각합니다.

• Babel로 트랜스파일 되지 않고 포함된 폴리필이 없는 최신 빌드(최신 브라우저용)입니다.
• Babel로 트랜스파일되고 필요한 모든 폴리필을 포함하는 ES5 호환 빌드(예: IE11에서 사용할 수 있음).

좋은 소리! @Snuffleupagus 에게 감사하고 모든 사람들이 이 작업에 참여했습니다:1st_place_medal: