Closed Bug 1669050 Opened 2 years ago Closed 2 years ago

Cannot paste SVG images inside contenteditable

Categories

(Core :: DOM: Editor, defect, P3)

defect

Tracking

()

RESOLVED FIXED
85 Branch
Webcompat Priority ?
Tracking Status
firefox-esr78 --- wontfix
firefox83 --- wontfix
firefox84 --- wontfix
firefox85 --- fixed

People

(Reporter: saschanaz, Assigned: mbrodesser)

References

(Blocks 1 open bug)

Details

(Keywords: dataloss, parity-chrome)

Attachments

(2 files)

Attached file svg-image-paste.html
  1. Open the attachment
  2. Select and copy the whole line
  3. Paste it

Expected: A new copy of the line including the images (and selecting SVG ideally should show selection indicator background)
Actual: SVG image becomes blank while <img> manages to be alive

I think that we should take a look this when we have much time since user may lost important SVG data on some web apps.

Severity: -- → S3
Keywords: dataloss
Priority: -- → P3

I'm having a similar issue. I can't paste any image to Whatsapp Web and to OneDrive document editor.
Usually I use snipping tool to capture a part of the screen and then I paste it in a OneDrive document or in a Whastapp Web conversation.
The image won't show up.

See Also: → 1674763
See Also: → 1664350

What's copied to the clipboard, is correct:

"text/html" flavor:

<meta http-equiv="content-type" content="text/html; charset=utf-8">foo
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"></image>
  </svg>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" width="200" height="200">
  bar

The error happens on pasting:

  foo
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <image height="200" width="200"></image>
  </svg>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" width="200" height="200">
  bar

the href is dropped.

Can you please provide a concrete example? Which Operating System and which Firefox build are you using?
I'm wondering if the issue you've described is about HTML <img>s or SVG <image>s.

Flags: needinfo?(denis.rosas)

The href attribute is removed during tree-sanitization. This is part of the call-stack.

Adding the attribute to kAttributesSVG fixes the bug.
However, I need to think whether this is the proper fix and if this doesn't break anything else.

Assignee: nobody → mbrodesser
Depends on: 1677092

Given that we allow it for mathml and we allow the equivalent src for HTML, we should allow href for SVG.

:longsonr: agree. Fix is ready, will create a review once the test is ready.

Summary: Cannot copy-paste SVG images inside contenteditable → Cannot paste SVG images inside contenteditable
Depends on: 1669963
Webcompat Priority: --- → ?
Keywords: parity-chrome

This follows the pattern of kAttributesHTML and kURLAttributesHTML,
which both contain href. Now, kAttributesSVG and kURLAttributesSVG
contain href too.

Unfortunately, the WPT-support for filling and reading the clipboard is
scanty (see bug 1676643), hence adding a Mochitest.

Pushed by mbrodesser@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/15090a85909d
add `href` to the allowed SVG attributes in `nsTreeSanitizer`. r=hsivonen
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 85 Branch
Flags: needinfo?(denis.rosas) → in-testsuite+
You need to log in before you can comment on or make changes to this bug.