OSS Gate Workshop: online: 2024-03-09: hdkzkg: OrgChart: Work log

[hdkzkg]

This is a work log of a "OSS Gate workshop".
"OSS Gate workshop" is an activity to increase OSS developers.
Here's been discussed in Japanese. Thanks.

作業ログ作成時の説明

以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。

OSS Gate Workshop: ${LOCATION}: ${YEAR}-${MONTH}-${DAY}: ${ACCOUNT_NAME}: ${OSS_NAME}: Work log

タイトル例↓：

OSS Gate Workshop: Tokyo: 2017-01-16: kou: Rabbit: Work log

OSS Gateワークショップ関連情報

• スライド：ワークショップの進行に使っているスライドがあります。
• チャット：OSS開発に関することならなんでも相談できます。ワークショップが終わった後もオンラインで相談しながら継続的にOSSの開発に参加しましょう！
• シナリオ：ワークショップの目的・内容・進め方の詳細が書いています。
• 過去のビギナーの作業ログ：他の人の作業ログから学べることがいろいろあるはずです。

[hdkzkg]

OSSを探す。
よく使う言語python
直近の案件で使いそうなライブラリ：組織図を作れるjavascriptのライブラリ

[hdkzkg]

javascriptの組織図ライブラリ
ライセンスはMIT
https://github.com/dabeng/OrgChart

[hdkzkg]

readmeに沿ってインストールする

[hdkzkg]

Usageの記述を読みながら実際にコードを書いてみる

[hdkzkg]

githubのreadme「CDN」のリンク
https://cdnjs.com/libraries/orgchart

のページで、https://cdnjs.cloudflare.com/ajax/libs/orgchart/4.0.1/js/jquery.orgchart.min.jsのスクリプトタグをコピーすると、

上記コピーしたhtmlファイルを開くと、
下記のエラーがconsoleに表示された。

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/orgchart/4.0.1/js/jquery.orgchart.min.js' with computed SHA-512 integrity '0dLxVDV+RMilliGduh7uXePakPcIyPFCc9TGx1NDl9ehZJK/YHt84mNQDHqPR/XxZ4jnMYXi/0ff0QOtY5FbuA=='. The resource has been blocked.

[blacktoad30]

上記コピーしたhtmlファイルを開くと、 下記のエラーがconsoleに表示された。

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/orgchart/4.0.1/js/jquery.orgchart.min.js' with computed SHA-512 integrity '0dLxVDV+RMilliGduh7uXePakPcIyPFCc9TGx1NDl9ehZJK/YHt84mNQDHqPR/XxZ4jnMYXi/0ff0QOtY5FbuA=='. The resource has been blocked.

ローカルのhtmlファイルで試してみたところ、同様のエラーが発生しました。

[blacktoad30]

integrityの値が合わない問題は、cdnjs側にありそうな気がする。
しかし、リンク元の情報をどこから仕入れているのかが分からない。

[daipom]

上記コピーしたhtmlファイルを開くと、 下記のエラーがconsoleに表示された。

cdnjs のことを全然知らないので恐縮なのですが、このコピー結果はhtmlファイルとして開いて何か動作することが期待される挙動ということなんですかね？

[blacktoad30]

@daipom

cdnjs のことを全然知らないので恐縮なのですが、このコピー結果はhtmlファイルとして開いて何か動作することが期待される挙動ということなんですかね？

たぶん、そうなのだと思います。(私もJS関連は詳しくないですが...)

[daipom]

期待値が分かっている状態であれば、この点が期待値通りにならないことについてフィードバックをできそうということになりますよね。

一方で、もしこのCDNが何に使うためのものなのかよくわからない、という状態なのであれば、このエラーについて詳しく調べるのとは別の観点で見てみたほうがよいかもしれません。

[blacktoad30]

• README: URLのリンク切れ
  https://github.com/cdnjs/packages?tab=readme-ov-file#contributing
  Discourseへのリンクが切れている。(Discourseのディスカッショングループがもう存在しない)
  cdnjsリポジトリのディスカッション に移行した?

• integrity の値が間違っている
  https://cdnjs.com/libraries/orgchart にて、orgchart.min.js の integrity のハッシュ値が違う。
  ディスカッション で報告する内容?

[daipom]

一方で、もしこのCDNが何に使うためのものなのかよくわからない、という状態なのであれば、このエラーについて詳しく調べるのとは別の観点で見てみたほうがよいかもしれません。

この場合、本来なら、もっとREADMEにCDNについて説明してほしい、というフィードバックの方向もありうるのですが、今回は

Users could find the related CDN support

と書いてあるので、そもそもCDN supportが必要な人用の説明という感じにも見えて、CDNが必要ない人は読み飛ばせばいいような箇所であるかもしれませんね。

[daipom]

• README: URLのリンク切れ
  https://github.com/cdnjs/packages?tab=readme-ov-file#contributing
  Discourseのリンクが切れている。(Discourseのディスカッショングループがもう存在していない?)
  https://github.com/cdnjs/cdnjs/discussions に移行した?

  • integrity の値が間違っている
    https://github.com/cdnjs/cdnjs/discussions で報告する内容?

OrgChart自体は問題なく一通り動いちゃった感じですか？

[blacktoad30]

@daipom

OrgChart自体は問題なく一通り動いちゃった感じですか？

はい。デベロッパーツールのコンソールに出力されたエラーメッセージ通りに、ハッシュ値を変更したところ動きました。

[daipom]

@daipom

OrgChart自体は問題なく一通り動いちゃった感じですか？

はい。デベロッパーツールのコンソールに出力されたエラーメッセージ通りに、ハッシュ値を変更したところ動きました。

おお！なんかフィードバックできそうですね！

[hdkzkg]

• README: URLのリンク切れ
  https://github.com/cdnjs/packages?tab=readme-ov-file#contributing
  Discourseへのリンクが切れている。(Discourseのディスカッショングループがもう存在しない)
  cdnjsリポジトリのディスカッション に移行した?
• integrity の値が間違っている
  https://cdnjs.com/libraries/orgchart にて、orgchart.min.js の integrity のハッシュ値が違う。
  ディスカッション で報告する内容?

cdnjs側の問題のようなので、cdnjs側でイシューを出す準備

[hdkzkg]

cdnjs側ではなく、orgchartへイシューを報告。cdnjsへ直接対応を依頼するかはorgchartの返答次第。

[hdkzkg]

sri、integrity、cdnで検索して同様のイシューはなさそう。

[blacktoad30]

メモ: イシューの内容について

• OrgChart
  integrity (SRI Hash) の値がおかしい (間違っている) ことの報告

• cdnjs
  README.md のリンク切れの報告、および変更の提案

[hdkzkg]

イシューのフォーマットなし。

タイトル
CDNのリンクをコピーしてそのまま使用するとエラーがでる

READMEのCDNにあるリンク先のページで、orgchart.min.jsのリンクをコピーして使用すると下記のエラーとなる。

cdnのコピー

consoleエラー内容

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/orgchart/4.0.1/js/jquery.orgchart.min.js' with computed SHA-512 integrity '0dLxVDV+RMilliGduh7uXePakPcIyPFCc9TGx1NDl9ehZJK/YHt84mNQDHqPR/XxZ4jnMYXi/0ff0QOtY5FbuA=='. The resource has been blocked.

integrityの値をエラー内容の値に書き換えると、jsファイルがダウンロードできるようになる。

[hdkzkg]

英語に翻訳しました。
タイトル
Copying and pasting a CDN link directly can result in errors.

When using the link for orgchart.min.js found in the README of a CDN, the following error occurs.

Copy link of cdn:

Error Details:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/orgchart/4.0.1/js/jquery.orgchart.min.js' with computed SHA-512 integrity '0dLxVDV+RMilliGduh7uXePakPcIyPFCc9TGx1NDl9ehZJK/YHt84mNQDHqPR/XxZ4jnMYXi/0ff0QOtY5FbuA=='. The resource has been blocked.

Solution:

By changing the integrity value to the one provided in the error details, the JS file becomes downloadable.

OS：windows 10 pro
browser：chrome 122.0.6261.112

[daipom]

良いと思います！

[github-actions]

おつかれさまでした！

ワークショップの終了にともないissueを閉じますが、このまま作業メモとして使っても構いません 👌

ワークショップの感想を集めています！

ブログなどに書かれた際は、このページへリンクの追加をお願いします 🙏

またの参加をお待ちしています！

[hdkzkg]

今日はありがとうございました！
イシュー投稿までできました。
dabeng/OrgChart#745