React License Violation

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

Transcript

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

   View Slide

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
   @
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Are you respecting
   Open Source licenses?
   

   View Slide

6. Rise your hand if you...
   ...
   

   View Slide

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
   

   View Slide

8. License of React
   

   View Slide

9. You should know the
   license of React.
   React
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. Are your React Apps
    includes license notice?
    React 

    

    View Slide

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
    

    View Slide

14. Don't remove license
    notice when you minify!
    minify
    

    View Slide

15. License violation
    of CRA Apps
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

20. Use extractComments option
    when you minify with terser.
    Terser extractComments
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

24. Well DONE!?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

30. Well DONE!!
    

    View Slide

31. License violation
    of React
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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...snip...
    https://unpkg.com/browse/react@16.12.0/umd/react.production.min.js
    35
    

    View Slide

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
    

    View Slide

37. Take care about license
    notice and enjoy OSS!
    OSS
    

    View Slide

38. Appendix: generating
    license list of modules
    

    View Slide

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
    

    View Slide

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
    

    View Slide

41. Thank you for your attention!
    Twitter: @dynamitter

    SpeakerDeck.com/dynamis
    41
    

    View Slide

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

    View Slide

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
    

    View Slide

44. https://vm.webdino.org
    44
    

    View Slide