metamask-mobile icon indicating copy to clipboard operation
metamask-mobile copied to clipboard

Implementation of webview to support svg with style and animations

Open tommasini opened this issue 3 years ago • 1 comments

Description The issue is that we can't render the SVG with the style tag with the react-native-svg library or image component of React native.

Propose Solution Using a webview, we can render the SVG with the style and animation. This led to some security concerns. So in order to try to eliminate the security concerns, we use a library with version 2.3.10 (the latest version for now) to sanitize the SVG. We forbidden the tag style on the html. On webView we disabled opening automatically a window with javascript and the dom storage (dom storage only on android).

Test Case In order to see how this sanitization algorithm works, we did some tests and added some possible malicious code to an SVG. We render an SVG with javascript code and some attributes that could inject cross-site scripting and we initiate the sanitize function to clean it. https://pastebin.com/i0tfrG6t To reproduce:

  • Create an index.html file with the code on Pastebin
  • Open it on the browser
  • Inspect the svg
  • You can notice that some attributes are removed compared to the Pastebin

We have this SVG: <svg width="329" height="329" id="svg" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24"> <g><animate attributeName="xlink:href" begin="0" from="javascript:alert(1)" to="&" />

Transforms into

<svg viewBox="0 0 24 24" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" id="svg" height="329" width="329"> <g><animate begin="0">

Screenshots/Recordings

Issue

Progresses #4561

Checklist

  • [ ] There is a related GitHub issue
  • [ ] Tests are included if applicable
  • [ ] Any added code is fully documented

tommasini avatar Jul 29 '22 19:07 tommasini

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

github-actions[bot] avatar Jul 29 '22 19:07 github-actions[bot]

Converting to a draft because needs more research

tommasini avatar Aug 18 '22 12:08 tommasini

This PR has been automatically marked as stale because it has not had recent activity in the last 90 days. It will be closed in 7 days. Thank you for your contributions.

github-actions[bot] avatar Jun 14 '23 15:06 github-actions[bot]

This PR was closed because it has been stalled for 7 days with no activity. Thank you for your contributions.

github-actions[bot] avatar Jun 21 '23 16:06 github-actions[bot]