$30 off During Our Annual Pro Sale. View Details »

React License Violation

dynamis
November 30, 2019

React License Violation

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

dynamis

November 30, 2019
Tweet

More Decks by dynamis

Other Decks in Technology

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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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: [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

    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