metamask-mobile
                                
                                 metamask-mobile copied to clipboard
                                
                                    metamask-mobile copied to clipboard
                            
                            
                            
                        Implementation of webview to support svg with style and animations
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
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.
Converting to a draft because needs more research
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.
This PR was closed because it has been stalled for 7 days with no activity. Thank you for your contributions.