fix: SVG Upload Preview Error

[jonioni]

🤔 This is a ...

• Bug fix

🔗 Related issue link

#36388 SVG Upload Error

💡 Background and solution

Uploading an SVG that contains <foreignObject> results in console error if using the default image preview.

Error message:

SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

It is a browser security protection that prevents cross origin URL from being used on createObjectURL.

Embedding the svg content directly as data url resolves the issue and permits image preview (i.e. using readAsDataURL instead of createObjectURL for SVG file).

https://stackoverflow.com/questions/50824012/why-does-this-svg-holding-blob-url-taint-the-canvas-in-chrome

📝 Changelog

Language	Changelog
🇺🇸 English	Fixes Upload preview error on SVG with <foreignObject> and cross-origin links
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[github-actions]

• 🚨 Please fill changelog in the PR

  • Write with a developer-oriented perspective and narrative method, without describing the details of the repair
  • Describing the problem and the impact on the developer
  • describing the user-first site problem, not your solution
  • Refer: https://ant.design/changelog#4.9.0

• 🚨 请填写 PR 中的 changelog

  • 请用面向开发者的角度和叙述方式撰写，不描述修复细节
  • 描述问题和对开发者的影响
  • 描述用户第一现场的问题，而非你的解决方式
  • 参考：https://ant.design/changelog-cn#4.9.0

[github-actions]

[afc163]

Could you add test case?

[codecov]

Codecov Report

Merging #36402 (4d635f0) into master (e262ae8) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master    #36402   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          430       430           
  Lines         8047      8054    +7     
  Branches      2434      2437    +3     
=========================================
+ Hits          8047      8054    +7     

Impacted Files	Coverage Δ
components/upload/utils.tsx	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e262ae8...4d635f0. Read the comment docs.

[jonioni]

Could you add test case?

Should it be a new test case, or added into the current it('previewFile should work correctly') case? @afc163

ant-design/components/upload/__tests__/uploadlist.test.js

Line 783 in 3fc4ff2

it('previewFile should work correctly', async () => {

I'll make a new test case first.

[afc163]

A new test case would be fine.

[jonioni]

A new test case would be fine.

Sounds good. A new test case has been added. Please check.

[afc163]

JSDOM 里能重现出 SecurityError 这个报错么？如果能，最好对错误是否还存在做个断言。

[jonioni]

JSDOM 里能重现出 SecurityError 这个报错么？如果能，最好对错误是否还存在做个断言。

This SecurityError is CORS related and seems to only apply to browsers and cannot be reproduced by JSDOM. I'm not very sure how the test case should be written.

The current test added is just for passing the coverage check.

Related discussion on the root cause of the issue: https://stackoverflow.com/questions/50824012/why-does-this-svg-holding-blob-url-taint-the-canvas-in-chrome

[jonioni]

Hi @afc163 I believe the PR is ready after the update. Can you help do a final review?

But on the other hand this issue won't lead to app crash, so feel free to close this PR if you think it should be resolved by browser providers instead of antd.