<script type="module" src="cmn.js"></script>
HTMLから直接読み込む場合はtype="module"属性をつけます。
<link rel="stylesheet" href="cmn.css">
HTMLから直接読み込む場合はtype=rel="stylesheet"属性をつけます。
@import url("serve.css");
CSSファイルの中から別のCSSを読み込みます。
※読み込み順が直列になるため、多用すると表示速度が低下する場合があります。
[.htaccessの使用]
JSやCSSが置いてあるフォルダに .htaccess ファイルを作成し、以下の内容を記述します。
.htaccessを使用して、他のサイトからJavaScriptやCSSを勝手に参照(直リンク)することを禁止する状態になります。
[メリット]
他人があなたのサーバーのリソース(通信量)を勝手に使うのを防げます。
外部サイトがあなたのデザインやスクリプトをそのまま流用してサイトを構築するのを難しくできます。
[デメリット]
(1) 偽装が可能
リファラ情報はブラウザ側で偽装したり、
セキュリティソフトの設定で送信されないようにしたりできるため、
100%完璧な遮断はできません。
(2) コード自体のコピーは防げない
一度ブラウザで表示されたソースコードをコピーして、
相手のサーバーに保存して使われることまでは防げません。
(3) デバッグへの影響
開発中にローカル環境から参照しようとしてブロックされることがあるため、
必要に応じて自分の開発環境のIPやドメインを許可リストに加える必要があります。
(例)
RewriteEngine On
# (1) 自分のサイトドメインを指定して許可する(wwwのあり/なし両方に対応)
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example\.com [NC]
# (2) 直接URLを打ち込んだ場合(リファラなし)も拒否する(任意)
RewriteCond %{HTTP_REFERER} !^$
# (3) 指定した拡張子(js, css)へのアクセスを拒否(Forbidden)する
RewriteRule \.(js|css)$ - [F,NC]
「example\.com」の部分は、指定のサイト(自身のサイト)のドメインに書き換えてください。
[NC]
大文字・小文字を区別しない設定です。
[F]
「403 Forbidden(閲覧禁止)」を返す命令です。
Googleなどの検索エンジンを許可したい場合
検索エンジンにファイルをインデックスさせたい(あるいはGoogleのツール等でサイトを確認したい)場合は、
許可リストにドメインを追加します。
(例)
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?google\.com [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?bing\.com [NC]
自分のIPアドレスを例外にする
開発中に自分がアクセスできなくなると困る場合は、特定のIPアドレスを許可することも可能です。
(例)
RewriteCond %{REMOTE_ADDR} !^123\.456\.789\.000
RewriteCondは条件を示しています。
RewriteCond命令文の次のステップ1行分の実行文に対して条件を実行します。
123\.456\.789\.000
はグローバルIPアドレスに相当する部分です。
!は否定なので、指定したグローバルIPアドレスではない場合、下記に書いた内容を実行するということになります。
例えば、この条件の後のステップに
RewriteRule \.(js|css)$ - [F,NC]
という拒否の実行を書いたりなどできます。
[注意点]
リファラ(参照元)の仕様
ユーザーがブラウザのセキュリティ設定で「リファラを送らない」ようにしている場合、
直接URLを打ち込んだ場合(リファラなし)も拒否するの設定「(!^$)」があると、
その正規のユーザーもJSやCSSを読み込めなくなる可能性があります。
コードのコピーは防げません。
この方法はあくまで「他人のサーバーからあなたのファイルを直接呼び出すこと」を防ぐものであり、
コードそのものをコピーして相手のサーバーに置かれることまでは防げません。