{"id":118665,"date":"2019-03-20T11:42:06","date_gmt":"2019-03-20T11:42:06","guid":{"rendered":"https:\/\/livablesoftware.com\/?p=118665"},"modified":"2019-03-20T11:42:06","modified_gmt":"2019-03-20T11:42:06","slug":"conflictjs-javascript-libraries-conflicts","status":"publish","type":"post","link":"https:\/\/livablesoftware.com\/conflictjs-javascript-libraries-conflicts\/","title":{"rendered":"ConflictJS: Finding and Understanding Conflicts Between JavaScript Libraries"},"content":{"rendered":"<p>The web runs on JavaScript. In fact, some <a href=\"https:\/\/w3techs.com\/technologies\/overview\/javascript_library\/all\" target=\"_blank\" rel=\"noopener\">sources<\/a> suggest that about 74% of all websites use some form of JavaScript library. The number of libraries for JavaScript applications has increased considerably over the last few years. When multiple JavaScript libraries are used together in a web application, they all share the same global namespace called <em>window<\/em>. Sharing\u00a0and writing to the same global namespace can lead to unexpected scenarios.<\/p>\n<p>As an example, consider the following two libraries <em>Strophe.js<\/em> and <em>JSEncrypt.js<\/em> :<\/p>\n<pre lang=\"javascript\" line=\"1\">    \/\/ Strophe.js\r\n    window.Base64 = {\r\n      encode: function(b) {\r\n      \/* code *\/\r\n      }\r\n      decode: function(b) {\r\n      \/* code *\/\r\n      }\r\n    };\r\n<\/pre>\n<pre lang=\"javascript\" line=\"1\">\r\n    \/\/ JSEncrypt.js\r\n    window.Base64 = {\r\n      unarmor: function(t) {\r\n      \/* code *\/\r\n      }\r\n      decode: function(i) {\r\n      \/* code *\/\r\n      }\r\n    };\r\n<\/pre>\n<p>Both libraries write to the same global variable <em>Base64<\/em>. If these libraries are included together, the library that is included last will overwrite the <em>Base64 <\/em>implementation of the other. This can potentially lead to unexpected situations (we call them conflicts) for unsuspecting developers using both of these libraries together. This can be verified by the following client that tries to encrypt some data using <em>JSEncrypt<\/em>. <\/p>\n<pre lang=\"javascript\" line=\"1\">\r\n\r\njsEncrypt = new JSEncrypt();\r\njsEncrypt.setKey(...);\r\n\r\n\/\/ Returns false instead of encrypted data when Strophe.js is loaded \r\n\/\/ after JSEncrypt.js.\r\njsEncrypt.encrypt(...); \r\n<\/pre>\n<p>When the client is executed while only including <em>JSEncrypt <\/em>then the data gets correctly encrypted but when executing the client after first loading <em>JSEncrypt.js<\/em> and then <em>Strophe.js<\/em>, the last call simply returns false.<\/p>\n<p><strong>ConflictJS is an approach to detect conflicting libraries by synthesizing such clients.<\/strong> The approach first dynamically analyzes individual libraries to detect writes to the global namespace while loading a library. Next, each global variable shared by multiple libraries is recorded as potentially conflicting. From the set of potentially conflicting libraries, the approach finally validates the conflicts by synthesizing a client while including the libraries by checking if it really leads to unexpected behavior.  <\/p>\n<p>We have evaluated <em>ConflictJS <\/em><strong>on 951 real-world libraries and the approach finds 166 (17%) certainly conflicting libraries<\/strong>.  We envision that ConflictJS helps library developers to prevent conflicts by making informed decisions about the choice of global variables. <\/p>\n<p>If you find our work interesting, you may go through the complete paper by following this link.<br \/>\nWe have made our approach open source  https:\/\/github.com\/sola-da\/ConflictJS and would welcome you to use it and provide us feedbacks and criticisms. <\/p>\n<p>Featured image from <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Tournament_bavarian_engraving.png\" rel=\"noopener\" target=\"_blank\">https:\/\/commons.wikimedia.org\/wiki\/File:Tournament_bavarian_engraving.png<\/a><\/p>\n<span class=\"et_bloom_bottom_trigger\"><\/span>","protected":false},"excerpt":{"rendered":"<p>How to avoid potential JavaScript conflicts due to libraries sharing and writing the same global namespace <\/p>\n","protected":false},"author":8,"featured_media":118667,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[9,14],"tags":[101,64,68],"_links":{"self":[{"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/posts\/118665"}],"collection":[{"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/comments?post=118665"}],"version-history":[{"count":0,"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/posts\/118665\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/media\/118667"}],"wp:attachment":[{"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/media?parent=118665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/categories?post=118665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/livablesoftware.com\/wp-json\/wp\/v2\/tags?post=118665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}