htmlToImage Chrome 64安全性错误：无法从“ CSSStyleSheet”读取“ cssRules”属性：无法访问规则

Question

新的Chrome 64安全更新似乎已损坏htmlToImage库。没有正确计算任何样式，并且呈现的样式就像完全没有应用样式一样。

有人知道解决方法/修复程序吗？我需要将CSS放在服务器上并允许CORS吗？

Answer 1

我刚刚解决了这个错误。

分叉库并发出拉取请求。 在合并之前，您可以使用派生的仓库：https://github.com/kmap-io/html-to-image

通过将html-to-image中package.json的目标替换为：

"html-to-image": "git+https://github.com/kmap-io/html-to-image.git"

---

关于错误

Chrome浏览器抱怨（引发错误）尝试读取不存在的属性。 Firefox也有抱怨，但它们仅发出警告，而不是错误。该修补程序包括替换

if (sheet.cssRules) {
  ...

与

if (sheet.hasOwnProperty('cssRules')) {
  ...

没有缺点（即：cssRules上有sheet时-这是一个样式表-脚本会按照规则遍历规则并将其添加到文档中。）

---

如何打补丁（直到被合并）。

由于某种原因，仅用我在其中提交了更改的fork替换库的repo对该软件包不起作用。我要求库的作者在请求请求后添加有关如何构建的说明，因为它们在自述文件中声明了请求请求和贡献。在此之前，这里是使用patch-package来应用此修复程序的方法：

• 在项目的"prepare": "patch-package"中的scripts内添加package.json
• npm i patch-package --save-dev
• 在node_modules/html-to-image/lib/embedWebFonts.js中，将
的第7行更改为

try {

到

if (sheet.hasOwnProperty('cssRules')) try {

• npx patch-package html-to-image

如果您有一个从头开始构建项目的部署脚本，则需要在调用npm run build（或类似情况，具体取决于您的堆栈）之前应用补丁程序：

git apply --ignore-whitespace patches/*.patch

就是这样。

合并修补程序后，您需要运行：

npx patch-package html-to-image --reverse