OSS License violation by React apps (and...) @ JSConf JP 2019 WebDINO Japan - Tomoya ASAI (dynamis)

about:me Tomoya ASAI - dynamis webdino.org (ex-Mozilla Japan) CTO Lecturer at Keio University Lecturer at Chuo University dynamis @ Community Twitter: @dynamitter facebook.com/dynamis speakerdeck.com/dynamis note: my avatar is red panda (fire fox, lesser panda) 2 @

about: WebDINO Japan Break the border of the Web! Non pro t org for Web, Browser, Openness Research & Consulting Research using Browsers (network, user behavior etc.) Building custom Browsers (Chromium, Firefox) Porting Browsers (for Embedded Devices etc) Human resource development & Event produce Web & Open education for students and youth Educating Engineers of Web, IoT and relating techs note: in 2017 "Mozilla Japan" renamed to "WebDINO Japan" https://www.webdino.org/ 3

Topic: License violation of React App License of React License violation of CRA Apps The Issue & How to Fix it License violation of React Appendix: generating license list of modules 4

Are you respecting Open Source licenses?

Rise your hand if you... ...

Rise your hand if you... Love (like) Open Source - maybe every attendees Know the License of React Don't violate the OSS license Know what you must do for MIT, BSD, Apache licence Keep license comment in your production code List up the license of all the modules and sub modules Con rm the license notice of each modules and sub modules Know about the license violation issue of Create React Apps Know about the license violation issue of o cial React release 7

License of React

You should know the license of React. React

License of React MIT License May 2013: React gets open sourced during the JSConfUS 2013 (with BSD + Patents license) Jul 2017: AFS moved Facebook BSD + Patents license to Category X (can not include) Aug 2017: Facebook explained about the license Sep 2017: React 16 (and 15.6.2) or later fainally relicensed under the MIT License 10

React's MIT License MIT License Copyright (c) Facebook, Inc. and its affiliates. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 11

Are your React Apps includes license notice? React 


react.development.js /** @license React v16.12.0 * react.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict'; (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefi ...snip... Of course better to add separate license file or UI to show the full list of OSS software. 13

Don't remove license notice when you minify! minify

License violation of CRA Apps

CRA: Create React App Creat React App Facebook's o cial tool to create React apps "Set up a modern web app by running one command." > npx create-react-app cra-app
 > cd cra-app
 > yarn
 > yarn build Have you ever used CRA for your apps? 16

build/static/js/2.649357e4.chunk.js (this["webpackJsonpcra-noeject"]=this["webpackJsonpcra- noeject"]||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(5)},function(e,t,n){"use strict";var r=Object.getOwnPropertySymbols,l=Object.prototype.hasOwn Property,a=Object.prototype.propertyIsEnumerable;functio n i(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function() {try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNa mes(e)[0])return!1;for(var t={},n=0;n<10;n+ +)t["_"+String.fromCharCode(n)]=n;if("0123456789"! ==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var ...snip... 17

Don't remove license notice when you minify! minify (again)

Source License notice strip #6441 Apps made with CRA will violate MIT current CRA app will remove ALL the comments from the js les (and will not generate any license les) of course not intentional violation I believe terser-webpack-plugin option needed! CRA use terser to minify codes Terser have extractComments option to specify which comments will be extracted to a separate le /^\**!|@preserve|@license|@cc_on/i
 comments will be stored to script.js.LICENSE le 19

Use extractComments option when you minify with terser. Terser extractComments

node_modules/react-scripts/con g/webpack.con g.js minimizer: [ // This is only used in production mode new TerserPlugin({ terserOptions: { ...snip... }, ...snip... parallel: !isWsl, // Enable file caching cache: true, sourceMap: shouldUseSourceMap, + extractComments: true, }), If you app have ejected, edit config/webpack.config.js in the same way. 21

build/static/js/2.a49946a1.chunk.js /*! For license information please see
 2.a49946a1.chunk.js.LICENSE */ (this["webpackJsonpcra-noeject"]=this["webpackJsonpcra- noeject"]||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(5)},function(e,t,n){"use strict";var r=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnPrope rty,a=Object.prototype.propertyIsEnumerable;function i(e) {if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)} e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e )[0])return!1;for(var t={},n=0;n<10;n+ +)t["_"+String.fromCharCode(n)]=n;if("0123456789"! ==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var ...snip... 22

build/static/js/2.a49946a1.chunk.js.LICENSE /* object-assign (c) Sindre Sorhus @license MIT */ /** @license React v16.12.0 * react.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** @license React v16.12.0 * react-dom.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** @license React v0.18.0 * scheduler.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 23

Well DONE!?

Is this enough? modules listed in the .LICENSE le: object-assign - by Sindre Sorhus react - by Facebook react-dom - by Facebook scheduler - by Facebook Only these??? If outputted code includes non-Facebook module code like object-assign, we need to include them 25

react-dom.production.min.js /** @license React v16.12.0 * react-dom.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /* Modernizr 3.0.0pre (Custom Build) | MIT */ 'use strict';(function(la,m){"object"===typeof exports&&"und efined"!==typeof module?module.exports=m(require("react")):" ...snip... https://unpkg.com/browse/[email protected]/umd/react-dom.production.min.js 26

react-dom.development.js /** @license React v16.12.0 * react-dom.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ ...snip... /** * Checks if an event is supported in the current execution environment. * * NOTE: This will not work correctly for non-generic events such as `change`, * `reset`, `load`, `error`, and `select`. * * Borrows from Modernizr. * * @param {string} eventNameSuffix Event name, e.g. "click". * @return {boolean} True if the event is supported. * @internal * @license Modernizr 3.0.0pre (Custom Build) | MIT */ function isEventSupported(eventNameSuffix) { ...snip... https://unpkg.com/browse/[email protected]/umd/react-dom.development.js 27

If you minify multiple times, some license notice may be removed!

LICENSE le example (at minimal): MIT License Copyright (c) Facebook, Inc. and its affiliates (React and relating modules), Sindre Sorhus (object-assign included in React), Modernizr (Modernizr 3.0.0pre (Custom Build) included in React DOM) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. I'm not 100% sure if this is the complete list but I cannot find any other so far 29

Well DONE!!

License violation of React

You may noticed I haven't show production build of React. React production

react.development.js (again) /** @license React v16.12.0 * react.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict'; (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefi ...snip... https://unpkg.com/browse/[email protected]/umd/react.development.js 33

react.development.js /** @license React v16.12.0 * react.development.js ...snip... /* object-assign (c) Sindre Sorhus @license MIT */ ...snip... https://unpkg.com/browse/[email protected]/umd/react.development.js 34

react.production.min.js /** @license React v16.12.0 * react.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict';(function(v,m){"object"===typeof exports&&"undef ined"!==typeof module?module.exports=m():"function"===typeof define&&define.amd?define(m):v.React=m()})(this,function(){fu nction v(a){for(var b="https://reactjs.org/docs/error-decoder .html?invariant="+a,c=1;c

license violation by o cial production React artifact react.development.js (OK) includes license comment of object-assign react.production.min.js (NG) doesn't include license comment of object-assign
 (code of object-assign is included) If you use production artifact of React (hosted by unpkg), you're violating the MIT license (unless you include separate license le mentioning object-assign, not only React). issue filed: https://github.com/facebook/react/issues/17492 36

Take care about license notice and enjoy OSS! OSS

Appendix: generating license list of modules

NPM License Checker license of the modules and dependencies All the npm modules or production modules installed in current dir will be listed. You can show list, count by license or output as csv/json le. note: this tool cannot automatically lter modules included in the build results (modules like web pack will be includes and you need to excludes them manually) https://github.com/davglass/license-checker 39

license-checker - basic usage > npx license-checker --production --unknown ├─ @babel/code-frame │ ├─ licenses: MIT │ ├─ repository: https://github.com/babel/babel/tree/master/ packages/babel-code-frame │ ├─ publisher: Sebastian McKenzie │ ├─ email: [email protected] │ ├─ path: /.../node_modules/@babel/code-frame │ └─ licenseFile: /.../node_modules/@babel/code-frame/LICENSE ...snip... > npx license-checker --production --unknown --csv "module name","license","repository" "@babel/[email protected]","MIT","https://github.com/babel/babel/ tree/master/packages/babel-code-frame" "@babel/[email protected]","MIT","https://github.com/babel/babel/tree/ master/packages/babel-core" ...snip... 40

Thank you for your attention! Twitter: @dynamitter
 SpeakerDeck.com/dynamis 41

Next Talk: iijlab seminor on 10th Dec. 12/10 ( ) iijlab Web YouTube Web API https://iijlab-seminars.connpass.com/event/157675/ 42

Web VideoMark : 43 GCP Internet sodium.js nginx/ uent-d 
 
 sodium.js 
 PC Chrome
 + 
 (Android) 
 endpoint log file SodiumServer AggregateServer QoE 
 
 QoE 
 GeoIP 
 (IP ) QoE Server QoE 
 mongoDB mongoDB 
 QoE 
 
 QoE

https://vm.webdino.org 44