質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

セキュリティー

このタグは、コンピューターシステムの安全性やデータの機密性に関連したトピックの為に使われます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

Q&A

0回答

1004閲覧

Nuxt.jsでCSPの設定が効かない

AyumuShigeta

総合スコア31

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

セキュリティー

このタグは、コンピューターシステムの安全性やデータの機密性に関連したトピックの為に使われます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

0グッド

1クリップ

投稿2019/06/01 02:25

編集2022/01/12 10:55

Nuxt.js でLINEログインを実装しているのですが
ログイン用のサーバーにアクセスすると、次のようなエラーが出ます

localhost:5000/auth/lineにアクセス時

Nuxt.jsでCSPの設定方法をNuxtドキュメントなどを調べました。
後述するようにnuxt.config.jsを設定してサーバーを再起動して見たのですが一向に上の、「default-src 'none'」エラーが表示され続けます。

改善すべき所など分かる方がいましたらご教授ください。。

javascript

1// nuxt.config.js 2import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin' 3import pkg from './package' 4require('dotenv').config(); 5const { BASE_URL } = process.env; 6const isDev = process.env.NODE_ENV !== 'production' 7export default { 8 mode: 'spa', 9 10 env: { 11 BASE_URL 12 }, 13 14 /* 15 ** Headers of the page 16 */ 17 head: { 18 title: pkg.name, 19 meta: [ 20 { charset: 'utf-8' }, 21 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 22 { hid: 'description', name: 'description', content: pkg.description } 23 ], 24 link: [ 25 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 26 { 27 rel: 'stylesheet', 28 href: 29 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' 30 } 31 ] 32 } 33 34 /* 35 ** Nuxt.js modules 36 */ 37 modules: [ 38 '@nuxtjs/proxy', 39 '@nuxtjs/axios', 40 ['nuxt-validate', { 41 lang: 'ja', 42 }] 43 ], 44 proxy: { 45 '/api' : "http://localhost:8000" 46 }, 47 48 generate: { 49 routes() { 50 } 51 }, 52 53 serverMiddleware: ['~/server'], 54 /* 55 ** Build configuration 56 */ 57 build: { 58 transpile: ['vuetify/lib'], 59 plugins: [new VuetifyLoaderPlugin()], 60 loaders: { 61 stylus: { 62 import: ['~assets/style/variables.styl'] 63 } 64 }, 65 /* 66 ** You can extend webpack config here 67 */ 68 extend(config, ctx) { 69 } 70 }, 71 render: { 72 csp: { 73 enabled: true, 74 policies: { 75 'script-src': [ 76 'https://www.google-analytics.com' 77 ], 78 'default-src': [ 79 'self', 80 'http://localhost:5000' 81 ] 82 } 83 } 84 } 85} 86

javascript

1// server/index.js 2 3"use strict"; 4import URL from '../assets/constants/url' 5 6require("dotenv").config(); 7 8// ライブラリのインポート。 9const express = require("express"); 10const app = express(); 11const line_login = require("line-login"); 12const session = require("express-session"); 13const session_options = { 14 secret: process.env.LINE_LOGIN_CHANNEL_SECRET, 15 resave: false, 16 saveUninitialized: true 17} 18app.use(session(session_options)); 19 20// 認証の設定。 21const lineLogin = new line_login({ 22 channel_id: process.env.LINE_LOGIN_CHANNEL_ID, 23 channel_secret: process.env.LINE_LOGIN_CHANNEL_SECRET, 24 callback_url: process.env.LINE_LOGIN_CALLBACK_URL, 25 prompt: "consent" 26}); 27 28// サーバー起動設定。 29app.listen(process.env.PORT || 5000, () => { 30 console.log(`server is listening to ${process.env.PORT || 5000}...`); 31}); 32 33// 認証フローを開始するためのルーター設定。 34app.get( 35 URL.AUTH_LINE_LOGIN, 36 lineLogin.auth() 37); 38 39// ユーザーが承認したあとに実行する処理のためのルーター設定。 40app.use( 41 URL.CALLBACK_URL_LINE_LOGIN, 42 lineLogin.callback( 43 (req, res, next, token_response) => { 44 // Success callback 45 res.json(token_response); 46 },(req, res, next, error) => { 47 // 認証フロー失敗時 48 res.status(400).json(error); 49 } 50 )); 51module.exports = { 52 path: '/server', 53 handler: app, 54// 下記は念の為に追記して見たのですが効果はありませんでした 55 render: { 56 csp: { 57 enabled: true, 58 policies: { 59 'script-src': [ 60 'https://www.google-analytics.com', 61 'http://localhost:5000', 62 ], 63 'default-src': [ 64 'self', 65 'http://localhost:5000' 66 ], 67 'img-src': ['self','http://localhost:5000'] 68 } 69 } 70 } 71}; 72 73

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問