article Security Developer Guideline in Custom Visuals Community Blog

article Security Developer Guideline in Custom Visuals Community Blog https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/Security-Developer-Guideline/ba-p/217566 <P><FONT size="4">Microsoft's best practices for building custom visuals in PowerBI</FONT></P><P> </P><P>Power BI enables developers to build their own custom visuals, and to visualize their business metrics the way they want them to be. </P><P>As a developer of custom visuals, you need to be aware of the security implications and take steps to make sure your visuals are as secure as possible. </P><P> </P><P>Here are a few of the common web-based threats you should be aware of: </P><P> </P><UL><LI>Data leakage</LI><LI>XSS attack</LI><LI>Session hijack</LI><LI>Malicious infected files</LI></UL><P> </P><P>Power BI infrastructure and iframe sandboxing, along with today's browsers security, blocks most malicious attacks, but there are several precautions you can take to increase security even more. </P><P> </P><P><U><STRONG>Packages</STRONG></U></P><P> </P><P>Before building a custom visual, you should consider the quality and popularity of packages and libraries you want to utilize. </P><P>Although there’s no strict policy about importing 3rd party vendor's libraries, we still review all packages before approving them. </P><P>There could be many security issues for an unknown package, so it’s worthwhile to use Microsoft's recommended packages, such as D3, for creating graphics and charts, or Bootstrap if you want a modern CSS look and feel. </P><P>  </P><P>Install an external JavaScript library by using any package manager (such as npm, yarn, etc.). </P><P>To install external libraries onto a custom visual, please visit the following link for more information:</P><P><A href="https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md" target="_blank">https://github.com/Microsoft/PowerBI-visuals/blob/master/Tutorial/ExternalLibraries.md</A> </P><P> </P><P><U><STRONG>Resources</STRONG></U></P><P> </P><P>Before publishing a custom visual, we recommend reviewing the resources it includes. </P><P>Following the guidance in the following sections will help keep your visual as safe as possible: </P><P>  </P><UL><LI>Do not use local resources that might disclose private information about you, your organization, or anything that's not specifically related to the Power BI visual. </LI><LI>Try not to keep TODO tasks as comments inside the code, these can be viewed when debugging the visual at any point from the browser. </LI><LI>Do not accept user input as a resource. For example, if you provide a set of colors to choose from, make sure to provide an element with hardcoded values, or values that came from your resource file. Do not let the user type the name of the color as a free text. Although programmatically this is possible, it requires a more robust input validation so it won't be bypassed, possibly causing a Code Injection or an <A href="https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29" target="_blank">XSS</A></LI></UL><P> </P><P><U><STRONG>HTTP Requests</STRONG></U></P><P> </P><P>When running a custom visual, inspect the network requests it sends and gets. </P><P>We recommend that developers keep control of their visuals’ network traffic and any external resources they consume.</P><P> </P><P><U><STRONG>Sandboxing</STRONG></U></P><P> </P><P>PowerBI contains each custom visual in a secure sandbox of its own,</P><P>This structure provides the necessary data isolation on the client side from one visual to another.</P><P> </P><P><A href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" target="_self">Read more about sandbox attribute.</A></P><P> </P><P><U><STRONG>Linting</STRONG></U></P><P> </P><P>Linting helps developers align with the best developing practices, security practices and syntax standards. </P><P>  </P><P>Microsoft's recommended linting rule sets are the following:</P><P><A href="https://github.com/Microsoft/tslint-microsoft-contrib" target="_blank">https://github.com/Microsoft/tslint-microsoft-contrib</A> </P><P>  </P><P>Tslint </P><P><A href="https://github.com/palantir/tslint" target="_blank">https://github.com/palantir/tslint</A> </P><P>  </P><P>The following commands install the necessary packages to properly lint your code” </P><P> </P><P> </P><PRE>npm install tslint --save-dev npm install typings --save-dev npm install tslint-microsoft-contrib --save-dev tslint --init ( if tslint.json does not exist already )</PRE><P> </P><P><U><STRONG>TypeScript</STRONG></U></P><P> </P><P>TypeScript is a programming language developed by Microsoft. </P><P>It is a strict superset of JavaScript meant to assist developers building large applications using static types, class-based OOP and modularity. </P><P>Even though it restricts the base code to types and classes, using TypeScript does not mean the code is safe from vulnerabilities. </P><P>XSS attacks are possible if using a string that is not parsed correctly. </P><P>  </P><P>Here are some rules you should keep in mind:  </P><UL><LI>Never trust user input or data </LI><LI>Encode everything </LI><LI>Keep data and markup separated </LI><LI>Use DOM properties manipulation like setAttribute(), getAttribute() , .attr(), .append(element), etc'. </LI></UL><P><A href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_blank">Read more about element properties.</A> </P><P><A href="https://github.com/Microsoft/TypeScript" target="_blank">More about TypeScript.</A></P><P> </P><P><U><STRONG>Parsing user input<BR /></STRONG></U></P><P> </P><P>Avoid using .innerHTML, .HTML, .settimeout(paint()..., eval() and other risky JavaScript functions. </P><P>If you want to add content to an element inside a visual please use the proper DOM API for it, for example: .append, .setAttribute, element.TextContext, element.text, etc.... </P><P> </P><P>We recommend using the <A href="https://d3js.org/" target="_blank">D3 </A>library, since D3 was tested and is very popular, it is safer to set and get user input with. </P><P>When you use the D3 and the DOM API correctly, there is no need to perform vast input escaping - the browser API makes sure user input resides between the text apostrophes, rendered as text and not as HTML Markup, eliminating the risk of code injection and XSS attacks. </P><P>  </P><P>Examples how to use D3 in a custom visual are found in the following location: </P><P><A href="https://github.com/Microsoft/PowerBI-visuals/tree/master/Tutorial" target="_blank">PowerBI-visuals/Tutorial</A> </P><P>  </P><P>In addition, you may want to check the latest <A href="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#XSS_Prevention_Rules_Summary" target="_blank">OWASP recommendations</A>. </P><P> </P><H1><SPAN class="mw-headline">XSS Prevention Rules Summary</SPAN></H1><P> </P><P>The following HTML snippets demonstrate how to safely render untrusted data in a variety of different contexts. </P><P>Data Type Context Code Sample Defense</P><P> </P><TABLE><TBODY><TR><TD>String</TD><TD>HTML Body</TD><TD><span><SPAN>UNTRUSTED DATA</SPAN></span></TD><TD><UL><LI><A href="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.231_-_HTML_Escape_Before_Inserting_Untrusted_Data_into_HTML_Element_Content" target="_blank" rel="nofollow">HTML Entity Encoding</A></LI></UL></TD></TR><TR><TD>String</TD><TD>Safe HTML Attributes</TD><TD><input type="text" name="fname" value="<SPAN>UNTRUSTED DATA</SPAN>"></TD><TD><UL><LI><A href="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.232_-_Attribute_Escape_Before_Inserting_Untrusted_Data_into_HTML_Common_Attributes" target="_blank" rel="nofollow">Aggressive HTML Entity Encoding</A></LI><LI>Only place untrusted data into a whitelist of safe attributes (listed below).</LI><LI>Strictly validate unsafe attributes such as background, id and name.</LI></UL></TD></TR><TR><TD>String</TD><TD>GET Parameter</TD><TD><a href="/site/search?value=<SPAN>UNTRUSTED DATA</SPAN>">clickme</a></TD><TD><UL><LI><A href="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.235_-_URL_Escape_Before_Inserting_Untrusted_Data_into_HTML_URL_Parameter_Values" target="_blank" rel="nofollow">URL Encoding</A></LI></UL></TD></TR><TR><TD>String</TD><TD>Untrusted URL in a SRC or HREF attribute</TD><TD><a href="<SPAN>UNTRUSTED URL</SPAN>">clickme</a><BR /><iframe src="<SPAN>UNTRUSTED URL</SPAN>" /></TD><TD><UL><LI>Canonicalize input</LI><LI>URL Validation</LI><LI>Safe URL verification</LI><LI>Whitelist http and https URL's only (<A title="Avoid the JavaScript Protocol to Open a new Window" href="https://www.owasp.org/index.php/Avoid_the_JavaScript_Protocol_to_Open_a_new_Window" target="_blank">Avoid the JavaScript Protocol to Open a new Window</A>)</LI><LI>Attribute encoder</LI></UL></TD></TR><TR><TD>String</TD><TD>CSS Value</TD><TD><div style="width: <SPAN>UNTRUSTED DATA</SPAN>;">Selection</div></TD><TD><UL><LI><A href="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.234_-_CSS_Escape_And_Strictly_Validate_Before_Inserting_Untrusted_Data_into_HTML_Style_Property_Values" target="_blank" rel="nofollow">Strict structural validation</A></LI><LI>CSS Hex encoding</LI><LI>Good design of CSS Features</LI></UL></TD></TR><TR><TD>String</TD><TD>JavaScript Variable</TD><TD><script>var currentValue='<SPAN>UNTRUSTED DATA</SPAN>';</script><BR /><script>someFunction('<SPAN>UNTRUSTED DATA</SPAN>');</script></TD><TD><UL><LI>Ensure JavaScript variables are quoted</LI><LI>JavaScript Hex Encoding</LI><LI>JavaScript Unicode Encoding</LI><LI>Avoid backslash encoding (\" or \' or \\)</LI></UL></TD></TR><TR><TD>HTML</TD><TD>HTML Body</TD><TD><div><SPAN>UNTRUSTED HTML</SPAN></div></TD><TD><UL><LI><A href="https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.236_-_Use_an_HTML_Policy_engine_to_validate_or_clean_user-driven_HTML_in_an_outbound_way" target="_blank" rel="nofollow">HTML Validation (JSoup, AntiSamy, HTML Sanitizer)</A></LI></UL></TD></TR><TR><TD>String</TD><TD>DOM XSS</TD><TD><script>document.write(<SPAN>"UNTRUSTED INPUT: " + document.location.hash</SPAN>);<script/></TD><TD><UL><LI><A title="DOM based XSS Prevention Cheat Sheet" href="https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet" target="_blank">DOM based XSS Prevention Cheat Sheet</A></LI></UL></TD></TR></TBODY></TABLE><P> </P><P><A href="https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#XSS_Prevention_Rules_Summary" target="_self">OWASP XSS CHEATSHEET</A></P><P> </P><P><U><STRONG>Privacy</STRONG></U></P><P> </P><P>When developing a visual on your local workstation, developers sometimes test it with our own files, which usually contains some data, which you may not always want to expose or publish. </P><P>In custom visuals there are several sections to check, in terms of ensuring security, before releasing a custom visual.</P><P> </P><OL><LI>Do not include private files or folders such as node_modules, dist, all temp folders </LI><LI>Check files signature - verify no private information is contained in your files (images, text files) </LI><LI>Do not keep private configuration files on the git repository. (use .gitignore) </LI><LI>Do not push temporary or redundant files to the git repository - only the files that the visual is using ( what pbiviz new creates for you + optional sample data for project ) </LI><LI>Make sure sample data is free of private company data. </LI></OL><P> </P><P><STRONG><U>Recap</U></STRONG></P><P> </P><P>Packages, Resources, HTTP Requests, Sandboxing, Linting, TypeScript, Parsing user input, and Privacy </P><P>Custom visuals provide a perfect platform to share your data visualization within, or out of your company, but make sure you keep the data & information safe on your side.</P><P> </P><P>It is highly recommended to go through all the sections described in this document so you can harden your visuals before releasing them.</P><P> </P><P>Stay safe,</P><P> </P><P>Assaf Vilmovski</P><P>Power BI Custom visuals</P><P> </P> Thu, 09 Nov 2017 13:00:00 GMT Assafv 2017-11-09T13:00:00Z Security Developer Guideline https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/Security-Developer-Guideline/ba-p/217566 <P>Microsoft's best practices for building custom visuals in PowerBI</P><P>----------------------------------------------------------------------</P><UL><LI>Packages</LI><LI>Resources</LI><LI>HTTP Requests</LI><LI>Sandboxing</LI><LI>Linting</LI><LI>TypeScript</LI><LI>Parsing user input</LI><LI>Privacy</LI><LI>Recap</LI></UL> Thu, 09 Nov 2017 13:00:00 GMT https://community.fabric.microsoft.com/t5/Custom-Visuals-Community-Blog/Security-Developer-Guideline/ba-p/217566 Assafv 2017-11-09T13:00:00Z