• ympdのスタイル変更について

    ympd-plusパッケージの準備ができたら、以下のようなコマンドで @sunatomo 版のWeb UIに差し替えできるようになります。

    stop ympd
    app remove ympd-base
    app install ympd-plus
    

    plusに差し替え済みなら、バージョンアップは次のコマンドで完了です。

    stop ympd
    app instll ympd-plus
    

    デフォルトのWeb UIに戻すには、plusをアンインストールして、baseをインストールすればOKです。

    stop ympd
    app remove ympd-plus
    app install ympd-base
    
  • この投稿が削除されました!
  • @パパリウス さま
    解説ありがとうございます。
    パッケージリリースは申し訳ありませんが来週14日を目処に行いたいと思います。
    (ちょっとまとまった時間が作れないもので...)
    baseに適していると思われる機能についてはplusリリース前にソースコードを間違いなくお渡しします。
    (plusのソースコードも当然ながら全部お渡しします)

    さて、昨日詳細を書くと言ったクロスサイトスクリプティングについて解説します。

    ・WebUI(ympd)の簡単な動作解説
    WebUIでは各ユーザのブラウザ上でJavaScriptを動かすことにより楽曲の取得・表示・再生制御などいろいろな機能を実現しておりますが、
    最初にこのUIを構築するための各パーツはRaspberryPi上のympd実行ファイル内に格納されているhtml・css・JavaScriptソースコート・画像ファイル・フォントファイルになります。
    これを利用者のWebブラウザへまず送って、ブラウザ上で展開・解析して実行しています。

    ・クロスサイトスクリプティングとその対策
    JavaScriptはかなり強力なプログラム実行環境であり、
    URLさえ指定すれば、Webブラウザの利用者が意図しないサイトに勝手に問い合わせが可能になります。
    本来のWebサービスを提供するサイト上で「JavaScriptのソースコードを攻撃者が別のサイトに誘導するように書き換えすることが出来ると非常にマズイ」というわけです。
    (そのように誘導されても利用者は全くわからないように偽装も可能)
    これをクロスサイトスクリプティング(サイト間をまたいだスクリプト実行)といいます。

    そこで、近代的なWebブラウザの標準設定では「最初にパーツ提供されたサイト以外にJavaScriptでパーツ取得をするためには専用の方法を使わないとダメ」というルールになっています。

    ・今回の「TEST」ボタンの実装について
    利用者のWebブラウザ〜NAS上のHTTPサーバ間で直接カバーアートを取得という行為は、HTML上のプロパティで取得する分はルールにあまり抵触しませんが、
    「TEST」ボタンをおしてJavaScriptでHTTPプロトコルを実行して直接取得(本当はURLの存在確認のためヘッダ取得のみ)するのは上記のルールに抵触するので動作しませんでした。

    そこで、視覚的にもカバーアートが見えれば面白いと思い、直接URL指定した別ウィンドウを表示させる方法としています。

    ・対策方法
    どうしてもTESTボタンでJavaScript経由でURLを取得する場合は以下の方法がありますが、
    どれも利用者に設定の負担をかけたり、セキュリティの設定を変更するため採用しませんでした。

    1)NASのHTTPサーバ側に「外部のどこからアクセスが来てもOK」というヘッダーを出力するように設定する
    2)利用者のWebブラウザでクロスサイトスクリプティングを許可するように設定を入れる
    3)利用者のWebブラウザで実行しているJavaScript内のコールバック関数に対して値を戻す(JSON形式のファイルのみ対応であること、HTTPサーバ側にCGI等のスクリプトを置く必要がある)

  • @sunatomo さん

    RADIO.jpg,NAS.jpg,RAM.jpgはどこに置くのですか?
    RADIO.jpgを /var/lib/mpd/music/RADIO/
    ,NAS.jpgを /etc/fstabに書かれてるNASのトップに置いたのですが、反映されません。

    また、「TEST」ボタンが404です。Screenshot from 2020-06-07 14-44-19.png

     ps.
    Webブラウザでクロスサイトスクリプティングを許可してます。

  • @Cresson さま

    大変申し訳ありません。テスト不足で肝心な話を書いておりませんでした。
    (この後、先の投稿のインストール用スクリプト記述も修正します。)
    NAS.jpg・RADIO.jpg・RAM.jpgは「CoverArt Filename」で指定した名前にする必要があります。
    (私の場合はFolder.jpgになります)
    それぞれの保存場所は以下の通りです。
    NAS.jpg・・・SETTINGSのNAS Setting pathで指定した場所
    RADIO.jpg・・・/var/lib/mpd/music/RADIO
    RAM.jpg・・・/var/lib/mpd/music/RAM

    404が出た場合は指定したURLに誤りがあるかもしれませんね。
    今回の場合、RaspberryPi指定のようですので、当方で作成したパス生成部分がおかしいか、Cresson さまの方で指定した「CoverArt Filename」の指定と実際に保存されているものが合わないかのどちらかになります。
    (テストについてはちょっと手抜きをしておりまして、CoverArt Filenameの最上部選択項目でURLを生成します。
    ご提示の画面の場合、別ウィンドウでのURLの最後がfolder.jpgになっているはずです。)

    おまけ
    クロスサイトスクリプティングは通常は許可しない(というか、一般のユーザはその設定を変えない前提)運用が望ましいと思い、JavaScript経由でのhttpリクエストでの実装は止めました。

  • @sunatomo さん

    出来ました。
    Screenshot_2020-06-07 symphonic-mpd.png

    ただ、RAMは電源落とすと消えるのでは?

  • @Cresson さま
    おめでとうございます。
    そうです。RAMはリブートで消えますので、
    将来的にはsystemdのスクリプトで「起動前に複写する記述」の追加が望ましいですね。
    (パッケージ配布時に対応いたします)