React License Violation

8adee9b4425232f1c23d6592a5d8c807?s=47 dynamis
November 30, 2019

React License Violation

JSConfJP 2019 で使用したスライド (に次回の公演情報を追加したもの) です。
https://jsconf.jp/

8adee9b4425232f1c23d6592a5d8c807?s=128

dynamis

November 30, 2019
Tweet

Transcript

  1. 1.

    OSS License violation by React apps (and...) @ JSConf JP

    2019 WebDINO Japan - Tomoya ASAI (dynamis)
  2. 2.

    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 @
  3. 3.

    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
  4. 4.

    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
  5. 7.

    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
  6. 10.

    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
  7. 11.

    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
  8. 13.

    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
  9. 16.

    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
  10. 17.

    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
  11. 19.

    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
  12. 21.

    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
  13. 22.

    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
  14. 23.

    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
  15. 25.

    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
  16. 26.

    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/react-dom@16.12.0/umd/react-dom.production.min.js 26
  17. 27.

    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/react-dom@16.12.0/umd/react-dom.development.js 27
  18. 29.

    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
  19. 33.

    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/react@16.12.0/umd/react.development.js 33
  20. 34.

    react.development.js /** @license React v16.12.0 * react.development.js ...snip... /* object-assign

    (c) Sindre Sorhus @license MIT */ ...snip... https://unpkg.com/browse/react@16.12.0/umd/react.development.js 34
  21. 35.

    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<arguments.length;c++)b+="&args[]="+ ...snip... https://unpkg.com/browse/react@16.12.0/umd/react.production.min.js 35
  22. 36.

    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
  23. 39.

    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
  24. 40.

    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: sebmck@gmail.com │ ├─ 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/code-frame@7.5.5","MIT","https://github.com/babel/babel/ tree/master/packages/babel-code-frame" "@babel/core@7.6.0","MIT","https://github.com/babel/babel/tree/ master/packages/babel-core" ...snip... 40
  25. 42.

    Next Talk: iijlab seminor on 10th Dec. 12/10 ( )

    iijlab Web YouTube Web API https://iijlab-seminars.connpass.com/event/157675/ 42
  26. 43.

    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