Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
電算部ネットワーク講座Ⅲ 
Node.js で Web アプリケーション開発
前回のおさらい 
・Google アカウント認証
Google アカウント認証 
Express + Passport を組み合わせて Google 
認証を実装。
構成 
• Passport の設定 
• Express の設定 
• Route の設定
Passport の設定 
var session = require("express-session"); 
var passport = require("passport"); 
var GoogleStrategy = require...
Express の設定 
var express = require("express"); 
var hogan = require("hogan-express"); 
var path = require("path"); 
! 
var...
Route の設定 
// トップページ 
app.get("/", function(req, res){ 
// HTML のレンダリング (生成) 
res.render("template", { 
title: "template e...
起動して 
http://localhost:3000/auth 
をブラウザで開く
動くけど、 
このコード読みにくい。
var session = require("express-session"); 
var passport = require("passport"); 
var GoogleStrategy = require("passport-goo...
var session = require("express-session"); 
var passport = require("passport"); 
var GoogleStrategy = require("passport-goo...
分割しよう
server.js 
var express = require("express"); 
var session = require("express-session"); 
var hogan = require("hogan-expres...
routes/index.js 
var express = require("express"); 
var router = express.Router(); 
! 
var auth = require("./auth"); 
! 
/...
routes/auth.js 
var express = require("express"); 
var router = express.Router(); 
! 
var passport = require("passport"); ...
ルートが分割されて 
メンテナンス性が向上
復習おわり
今回の内容 
・セキュリティ
Web アプリケーションの 
代表的な脆弱性 
・Parameter Manipulation 
・XSS 
・CSRF 
・SQLi 
・Directory Traversal 
・Session Hijacking 
・OS Command...
Nächste SlideShare
Wird geladen in …5
×

後期03

  • Als Erste(r) kommentieren

後期03

  1. 1. 電算部ネットワーク講座Ⅲ Node.js で Web アプリケーション開発
  2. 2. 前回のおさらい ・Google アカウント認証
  3. 3. Google アカウント認証 Express + Passport を組み合わせて Google 認証を実装。
  4. 4. 構成 • Passport の設定 • Express の設定 • Route の設定
  5. 5. Passport の設定 var session = require("express-session"); var passport = require("passport"); var GoogleStrategy = require("passport-google").Strategy; ! passport.use(new GoogleStrategy({ returnURL: "http://localhost:3000/auth/callback", realm: "http://localhost:3000/" }, function (id, profile, done) { console.log("id:", id); console.log("profile:", profile); ! profile.id = id; ! done(null, profile); })); ! var users = {}; ! passport.serializeUser(function (user, done) { users[user.id] = user; done(null, user.id); }); ! passport.deserializeUser(function (id, done) { var user = users[id]; ! if (user) { done(null, user); } else { done("user is not exists"); } });
  6. 6. Express の設定 var express = require("express"); var hogan = require("hogan-express"); var path = require("path"); ! var app = express(); ! // session settings app.use(session({ name: "sess-id", cookie: { path: "/", httpOnly: true, maxAge: null }, secret: "secret" })); ! // passport middleware app.use(passport.initialize()); app.use(passport.session()); ! // ビューの設定 app.set("views", path.join(__dirname, "views")); app.set("view engine", "html"); app.engine("html", hogan); ! app.listen(3000);
  7. 7. Route の設定 // トップページ app.get("/", function(req, res){ // HTML のレンダリング (生成) res.render("template", { title: "template example", list: ["node.js", "express", "hogan"] }); }); ! // 認証ページ app.get("/auth", passport.authenticate("google")); ! // 認証コールバックページ app.get("/auth/callback", passport.authenticate("google", { successRedirect: "/auth/success", failureRedirect: "/auth/fail" })); ! // 認証成功ページ app.get("/auth/success", function (req, res) { res.send("認証に成功しました。"); }); ! // 認証失敗ページ app.get("/auth/success", function (req, res) { res.send("認証に失敗しました。"); });
  8. 8. 起動して http://localhost:3000/auth をブラウザで開く
  9. 9. 動くけど、 このコード読みにくい。
  10. 10. var session = require("express-session"); var passport = require("passport"); var GoogleStrategy = require("passport-google").Strategy; ! passport.use(new GoogleStrategy({ returnURL: "http://localhost:3000/auth/callback", realm: "http://localhost:3000/" }, function (id, profile, done) { console.log("id:", id); console.log("profile:", profile); ! profile.id = id; ! done(null, profile); })); ! var users = {}; ! passport.serializeUser(function (user, done) { users[user.id] = user; done(null, user.id); }); ! passport.deserializeUser(function (id, done) { var user = users[id]; ! if (user) { done(null, user); } else { done("user is not exists"); } }); ! var express = require("express"); var hogan = require("hogan-express"); var path = require("path"); ! var app = express(); ! // session settings app.use(session({ name: "sess-id", cookie: { path: "/", httpOnly: true, maxAge: null }, secret: "secret" })); // passport middleware app.use(passport.initialize()); app.use(passport.session()); ! // ビューの設定 app.set("views", path.join(__dirname, "views")); app.set("view engine", "html"); app.engine("html", hogan); ! app.listen(3000); ! // トップページ app.get("/", function(req, res){ // HTML のレンダリング (生成) res.render("template", { title: "template example", list: ["node.js", "express", "hogan"] }); }); ! // 認証ページ app.get("/auth", passport.authenticate("google")); ! // 認証コールバックページ app.get("/auth/callback", passport.authenticate("google", { successRedirect: "/auth/success", failureRedirect: "/auth/fail" })); ! // 認証成功ページ app.get("/auth/success", function (req, res) { res.send("認証に成功しました。"); }); ! // 認証失敗ページ app.get("/auth/success", function (req, res) { res.send("認証に失敗しました。"); });
  11. 11. var session = require("express-session"); var passport = require("passport"); var GoogleStrategy = require("passport-google").Strategy; ! passport.use(new GoogleStrategy({ returnURL: "http://localhost:3000/auth/callback", realm: "http://localhost:3000/" }, function (id, profile, done) { console.log("id:", id); console.log("profile:", profile); ! サーバの設定もルートも 全てが1つのファイルに profile.id = id; ! done(null, profile); })); ! var users = {}; ! passport.serializeUser(function (user, done) { users[user.id] = user; done(null, user.id); }); ! passport.deserializeUser(function (id, done) { var user = users[id]; ! if (user) { done(null, user); } else { 書かれている… done("user is not exists"); } }); ! var express = require("express"); var hogan = require("hogan-express"); var path = require("path"); ! var app = express(); ! // session settings app.use(session({ name: "sess-id", cookie: { path: "/", httpOnly: true, maxAge: null }, secret: "secret" })); // passport middleware app.use(passport.initialize()); app.use(passport.session()); ! // ビューの設定 app.set("views", path.join(__dirname, "views")); app.set("view engine", "html"); app.engine("html", hogan); ! app.listen(3000); ! // トップページ app.get("/", function(req, res){ // HTML のレンダリング (生成) res.render("template", { title: "template example", list: ["node.js", "express", "hogan"] }); }); ! // 認証ページ app.get("/auth", passport.authenticate("google")); ! // 認証コールバックページ app.get("/auth/callback", passport.authenticate("google", { successRedirect: "/auth/success", failureRedirect: "/auth/fail" })); ! // 認証成功ページ app.get("/auth/success", function (req, res) { res.send("認証に成功しました。"); }); ! // 認証失敗ページ app.get("/auth/success", function (req, res) { res.send("認証に失敗しました。"); });
  12. 12. 分割しよう
  13. 13. server.js var express = require("express"); var session = require("express-session"); var hogan = require("hogan-express"); var passport = require("passport"); var path = require("path"); ! var routes = require("./routes"); ! var app = express(); ! // session の設定 app.use(session({ name: "sess-id", cookie: { path: "/", httpOnly: true, maxAge: null }, secret: "secret" })); ! // passport middleware app.use(passport.initialize()); app.use(passport.session()); ! // ビューの設定 app.set("views", path.join(__dirname, "views")); app.set("view engine", "html"); app.engine("html", hogan); ! // ルートの読み込み app.use(routes); ! app.listen(3000);
  14. 14. routes/index.js var express = require("express"); var router = express.Router(); ! var auth = require("./auth"); ! // トップページ router.get("/", function(req, res){ // HTML のレンダリング (生成) res.render("template", { title: "template example", list: ["node.js", "express", "hogan"] }); }); ! // 認証ページ router.use("/auth", auth); ! module.exports = router;
  15. 15. routes/auth.js var express = require("express"); var router = express.Router(); ! var passport = require("passport"); var GoogleStrategy = require("passport-google"). Strategy; ! passport.use(new GoogleStrategy({ returnURL: "http://localhost:3000/auth/callback", realm: "http://localhost:3000/" }, function (id, profile, done) { console.log("id:", id); console.log("profile:", profile); ! profile.id = id; ! done(null, profile); })); ! var users = {}; ! passport.serializeUser(function (user, done) { users[user.id] = user; done(null, user.id); }); ! passport.deserializeUser(function (id, done) { var user = users[id]; ! if (user) { done(null, user); } else { done("user is not exists"); } }); // 認証ページ router.get("/", passport.authenticate("google")); ! // 認証コールバックページ router.get("/callback", passport.authenticate("google", { successRedirect: "/auth/success", failureRedirect: "/auth/fail" })); ! // 認証成功ページ router.get("/success", function (req, res) { res.send("認証に成功しました。"); }); ! // 認証失敗ページ router.get("/success", function (req, res) { res.send("認証に失敗しました。"); }); ! module.exports = router;
  16. 16. ルートが分割されて メンテナンス性が向上
  17. 17. 復習おわり
  18. 18. 今回の内容 ・セキュリティ
  19. 19. Web アプリケーションの 代表的な脆弱性 ・Parameter Manipulation ・XSS ・CSRF ・SQLi ・Directory Traversal ・Session Hijacking ・OS Command Injection ・...

×