multimedia im netz online multimedia - lmu münchen · 2019-10-01 · multimedia im netz online...

Multimediaim NetzOnlineMultimediaWintersemester2015/16

Tutorial10– MajorSubject

Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial10- 1

Today’sAgenda

• Theoryrecap:questionsfromtheassignments• Mash-Ups• Discussion:YourQuestionssofar.



TheoryRecap

CookieTheft

• Man-in-the-middle (MITM)attackwiththegoaltoimpersonateanotheruser throughstealinga“Magic-Cookie”

• AlsoknownasSession-Hijacking• Solution:Encryptedcommunicationchannels(SSL)

• Readingmaterial:– https://www.techopedia.com/definition/24633/cookie-theft– http://www.welivesecurity.com/2010/11/09/cookie-theft-sidejacking-

or-session-hijacking-for-normal-people/– https://en.wikipedia.org/wiki/Session_hijacking– https://en.wikipedia.org/wiki/HTTP_cookie#Cookie_theft_and_sessio

n_hijacking


CookieTheftExample

• Take-away:UseSSL/TLS!• GetyourSSLCertificatehere:https://letsencrypt.org/Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial10- 5

Loginwithusername+password

Magiccookie

User

Attacker

Impersonateuser

VanillaJS

• …isnot arealframework.• VanillaJS=UsingJavaScriptwithoutanyframeworks/

libraries• Pros:

– Muchfasterintermsofoperationspersecond– Onlyslightly“uglier”

• Cons:– Requiresmorecode– Handymethodsnotalwaysavailable(cross-browserissue)


WhyisjQueryapotentialproblem?

• DOMselectionsofferconveniencefunctionality• Example:YoucanpassStringscontainingselectorsorHTMLor

jQueryobjectsorgenuineDOM-nodestothe$() function.$('<div>Hi!</div>').appendTo('div:eq(2)');

• Thisresultsinif-thencontrolsaffectingperformance

Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial10- 7source(datanotverified):vanilla-js.com

Hoisting(1)

• Variabledeclarationsaremovedtothetopofthecurrentscopeà avariablecanbeusedbefore itwasdeclared

• Example<div id="foo"></div><script>

function setContent(){content = 'This is a hoisting test.';

var div = document.getElementById('foo');div.innerHTML = content;

var content;}

</script>


http://www.w3schools.com/js/js_hoisting.asp

Hoisting(2)- Implications

• Sincewecanusevariablesbeforetheyweredeclared,thismightleadtobugsveryeasily.

• Recommendation:Declareall yourvariablesatthetopofascope.

• Example:function properSetContent(message){

var content, div;content = message;div = document.getElementById('foo');div.innerHTML = content;

}


http://www.w3schools.com/js/js_hoisting.asp

StyleGuides,Tips,andTricks

• Theseguidesarehighlyrecommended,ifyouareintoextendingyourknowledgeaboutFront-Endcoding

• https://github.com/airbnb/javascriptairbnb’s veryexhaustiveandstructuredapproachtoimprovethequalityoftheirJavaScriptcode.

• https://github.com/AllThingsSmitty/css-protipshttps://github.com/AllThingsSmitty/jquery-tips-everyone-should-knowCSSandjQuerytipsbyAllThingsSmitty

• https://github.com/bendc/frontend-guidelinesFront-endmarkup/coderecommendationsbyD.DeCock


ScreenScraping

• Mostcommonly“WebScraping”:Automaticinformationextractionfromwebsites

• Screenscrapingsometimesalsomeans:takinganautomatedscreenshotandrunningtheimagethroughOCR(opticalcharacterrecognition)

• Example– Flightsearchengines– Dataaggregators– Mash-ups

• Often,screenscrapingviolatesusageterms!


Static,Dynamic,Duck-Typing

• Static:Everyvariableisdeclaredwithastatic,non-changeabletype.E.g.String s = "myString";

• Dynamic:Variablesaredeclaredwithoutanexplicittype.E.g.var x = 42; var s= "Hello";

• Duck-Typing:– Specialformof“dynamic”typing:allthatcountsisthesuitabilityto

performanactionwithanobject.à “doestheobjecthavemethodXYZ?”

– “WhenIseeabirdthatwalkslikeaduckandswimslikeaduckandquackslikeaduck,Icallthatbirdaduck.”JamesWhitcombRiley.


https://en.wikipedia.org/wiki/Duck_typing

LazyLoading

• DesignPattern(notonlyontheweb)• Commonuse-caseontheweb:placeholdersthatarereplaced

withtheactualimages• Advantages

– Web-sitecontentbecomesvisible/accessiblefaster– Trafficcanbereduced

• Disadvantages– Numberofrequestscanrapidlyincrease– Difficulttocache/bookmark

• Wheredoyouseelazyloadingeveryday?


https://en.wikipedia.org/wiki/Lazy_loading

Watermarking:CharacterizationTask

EXIFinformationinJPEGfile• Visibility:notinimagedirectly.EXIFtoolnecessary.• Universality:Depends.Imagesfromthesamecamerawillallhave

thesameEXIFinformationregardingthecameramodel/vendor.• Detectability:High.Fileexplorershowsdatawithamouseclick.• Robustness:Low.Printingandscanningdestroyswatermark.• Capacity:Medium.Therearemanydifferentfields.Butdifficultto

store“rich”information(e.g.logos)inEXIFinfo• Security:Low.EXIFinformationcaneasilybechanged.• Efficiency:High.Thereislittleoverheadwithinsertingthedata.



Mash-Ups

Mash-Ups

• Aggregationofmultimediacontent:Singlewebpagethatshowscontentfromalotofothersources.

• Onespecifictopic(e.g.amusicband)• Contentoriginatesfromexternalwebservices• Usually,mashupsgatherdatafrommultiplesourcesand

displayitnicely

• Getinspired:http://www.programmableweb.com/mashups/


https://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)

Mash-Ups:Visually


+ ++ + ++…=Mash-Up

Prerequisite:Authentication

• Opening anAPIto the public can cause alot of traffic/stressfor the servers (...and their administrators)

• Many services require you to sign up for anaccess key to theapplicationprogramming interfaces (APIs)– Usually sent viaaGET/POSTparameter to identify the origin– Used tomonitor requests and quota.– Fixedquota of requests for some services

(which you probablywon‘t exceed inthis course)

• Advanced Authorization:OAuth


OAuth

• Motivation:Userswanttoensurethatwebappscanonlyaccesswhathasbeenapprovedbytheusersthemselves.

• Solution:OAuthStandardizedprotocolforAPIauthorization

• Providersissueaccesstokenstoappsallowingthemtooperateintheirname

• ManyAPIssupporttheOAuth mechanism

• Furtherreadings:– http://hueniverse.com/oauth/– http://oauth.net/


Example:Twitter&OAuth

• TheTwitterAPInotaccessiblefromclient-sideJavaScript,becausetheAPIsecretswouldbecomereadable.

• Therearetwovariantsintwitter:– Application-Userauthentication:

• Appactsonbehalfofuser• Authenticationensurespermissionsforeachapp

– Application-onlyauthentication:• Appdoesnothaveanyuser-context(e.g.profilename)• Onlyallowsaccesstopubliclyavailableinformationontwitter


RegisteraTwitterApp


NodeJS andTwitter

• WecanuseanodeapptoaccesstheTwitterAPI

• Librariesmakeourliveseasier!– “Passport”providesgeneralaccesstoOAuth providersforuser-

authentication.– Forourexample,weusethetwitter packagethatincludesallsteps

forapplication-levelauthentication.

• Moreinfo:https://www.npmjs.com/package/twitter

• Useitinyourapp:npm install twitter --save


routes/twitter.js(1)

• DefinetheTwitteraccesscredentialsinconfig/config.js• Exampleusage:


var express = require('express');var router = express.Router();var config = require('../config/config');var Twitter = require('twitter');

var twitterClient = new Twitter(config.twitter);

routes/twitter.js(2)

router.get('/', function (req, res) {var searchTerm;if (req.query.q && req.query.q.length > 0) {

searchTerm = req.query.q; }else { searchTerm = 'MMN' }twitterClient.get('search/tweets', {

q: searchTerm}, function (error, docs) {

if(!error){res.json({

status : 'success',tweets : docs.statuses,message : 'fetched Tweets'

}); }else{

res.json({status : 'error',message : error

})}

})});

Ludwig-Maximilians-UniversitätMünchen OnlineMultimediaWS2015/16- Tutorial10- 24https://dev.twitter.com/rest/reference/get/search/tweets

routes/index.js

var express = require('express');var router = express.Router();

var twitterRoute = require('./twitter');

router.use('/twitter',twitterRoute);

module.exports = router;


Onthefrontend

• Weprovidedafullyworkingfrontend intheexamplesonGitHub.

• ThisiswherethecalltotheAPIismade:


function APIHandler() {const api = {

baseURL: '/',tweets: {

"get": 'twitter/'}

};this.fetchTweets = function(searchTerm, callback) {

$.get(api.baseURL + api.tweets.get, {q: searchTerm

}, callback)};

}

Round-Up

Enjoytheholidays!


Thanks!Whatareyourquestions?


multimedia im netz online multimedia - lmu münchen · 2019-10-01 · multimedia im netz online...

Documents