如何在pdf.js中使用CSP？我的工人有问题

问题描述

MVC c＃应用程序。 我正在使用以下格式的CSP：

import "./wdyr";
import React,{ useState,useEffect } from "react";
import ReactDOM from "react-dom";
import ErrorBoundary from "./components/hooksTesting/ErrorBoundary";

const DisplayTitle = () => {
  console.count(`render DisplayTitle`);
  return (
    <div style={styles.mainWrapper3}>
      <h1 style={styles.display3}>HOOKS TESTING APP</h1>
    </div>
  );
};

const DisplayCount = ({ count }) => {
  console.count(`render DisplayCount`);
  return (
    <div style={styles.mainWrapper2}>
      <h1 style={styles.display2}>THE CURRENT VALUE IS {count}</h1>
    </div>
  );
};

const ChangeCount = ({ showCurrentValue }) => {
  console.count(`render ChangeCount`);
  const [value,setValue] = useState(0);
  const incr = () => setValue(value + 1);
  const decr = () => value > 0 && setValue(value - 1);

  useEffect(() => {
    const myfunc = () => {
      value >= 0 && showCurrentValue(value);
    };
    myfunc();
  },[value,showCurrentValue]);
  return (
    <div style={styles.buttonCompWrapper}>
      <button style={styles.mybtn} onClick={incr}>
        +1
      </button>
      <button style={styles.mybtn} onClick={decr}>
        -1
      </button>
    </div>
  );
};

const Parent = () => {
  console.count(`render Parent`);
  const [count,setCount] = useState(0);

  const showCurrentValue = (value) => setCount(value);
  return (
    <div style={styles.mainWrapper1}>
      <ErrorBoundary>
        <DisplayTitle />
        <DisplayCount count={count}></DisplayCount>
        <ChangeCount showCurrentValue={showCurrentValue}></ChangeCount>
      </ErrorBoundary>
    </div>
  );
};

const styles = {
  buttonCompWrapper: {
    width: "50vw",height: "20vh",background: "grey",},mybtn: {
    margin: "1vh 2vw",padding: "1vh 1vw",background: "pink",mainWrapper1: {
    width: "90vw",height: "90vh",background: "black",display: "flex",flexDirection: "column",justifyContent: "center",aliginItems: "center",display1: {
    color: "white",fontSize: "2vw",mainWrapper2: {
    width: "50vw",display2: {
    color: "white",mainWrapper3: {
    width: "50vw",background: "blue",display3: {
    color: "white",};

ChangeCount.whyDidYouRender=true;



ReactDOM.render(
  <React.StrictMode>
    <Parent />
  </React.StrictMode>,document.getElementById("root")
);

在proyect中，我将 pdf.js 用于base64 pdf。我看到了我的文档，但没有看到pdf.js中的按钮栏。 我的浏览器控制台显示：

和我的javascript函数使用：

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    script-src 'self' https://mozilla.github.io/pdf.js/build/pdf.js https://mozilla.github.io/pdf.js/build/pdf.worker.js;
    style-src  'self' https://meyerweb.com/eric/tools/css/reset/reset.css;
    object-src 'self';
    base-uri 'self';
    connect-src 'self';
    font-src 'self';
    frame-src 'self';
    img-src 'self';
    manifest-src 'self';
    media-src 'self';
    worker-src blob:;"/>

我尝试使用本地pdf.js在default-src中添加blob ：（这没有错误，但不起作用）...

其他信息：

• api.js是pdf.js Webpack的一部分。
• 我的测试处于预生产阶段（在localhost中，控制台抛出0个错误）。
• 我没有pdf.js按钮栏的CSS。

提前谢谢！

解决方法

尝试将blob：添加到script-src。

,

您的浏览器控制台显示CSP：

default-src https: data: 'unsafe-inline' *.google.com

与您在元标记中显示的不同：

default-src 'self'; ...

实际上，您确实在其他地方发布了Content-Security-Policy，而不是您认为（并进行编辑）。

worker-src blob：在元标记中为totally enough，以允许从blob-URL创建工作程序。

,

@granty给了我答案：控制台中的消息不是通用消息。我不知道为什么，但是我的IIS使用了另一个CSP配置。 我的代码可以删除IIS响应标头部分中的配置。