Category Archives: HTML, CSS, JScript

React a Redux – záznam [Martin Havel, Lukáš Rada, HAVIT Objevitelský den 28.11.2017]

Záznam z úvodního brífingu pro náš HAVIT Objevitelský den (28.11.2017), kdy se snažíme na jeden den odpojit od práce a věnovat ho sebevzdělávání např. formou hrátek s libovolnou technologií. Kdo neměl vybráno téma vlastní, mohl se tentokrát připojit k objevování Reactu a Reduxu.

Záznam je publikován na našem HAVIT YouTube Channel.

React

První část – React – prezentoval Martin Havel:

Redux

Druhou část – Redux – prezentoval Lukáš Rada:

 

Hackování webů běžnými „smrtelníky“ – záznam [Jiří Kanda, HAVIT Vzdělávací okénko 19.10.2017]

Záznam z interního vzdělávacího okénka HAVIT z 19.10.2017 je publikován na našem HAVIT YouTube Channel. Téma prezentoval Jiří Kanda:

Dotčená témata:

  • Open Redirects
  • XSS – Cross Site Scripting, ASP.NET Request Validation
  • MIME-type injection
  • External JS references, CDN, Tag Managers
  • Cross Site Request Forgery (XSRF/CSRF)
  • CORS – Cross Origin Resource Sharing, Preflight requests
  • X-Frame-Options
  • X-Content-Type-Options
  • X-XSS-Protection

NPM as a build tool – záznam [Vít Heřman, HAVIT Vzdělávací okénko 27. 4. 2017]

Záznam z interního vzdělávacího okénka HAVIT z 27.4.2017 je publikován na našem HAVIT YouTube Channel. Téma prezentoval Vít Heřman:

Dotčená témata:

  • Grunt
  • Gulp
  • Webpack
  • NPN
  • NPN scripts
  • Pre a post skripty

Napojení Swashbuckle/Swagger v ASP.NET Core aplikaci na Google OpenID Connect

Pokud máme API, které je s authentizací pomocí JWT (JwtBearer) a chceme pomocí Swashbuckle/Swaggeru naše API testovat, je možné se pomocí Swashbuckle/Swaggeru přihlásit a získaný token (id_token/JWT) předávat  do API automaticky.

Swashbuckle/Swagger má podporu pro OAuth2, nikoliv však pro OpenID Connect. Avšak implementace OAuth Googlu umožní získat id_token (JWT) pro OpenID Connect. Chce to však jeden trik v javascriptu, který vymění hodnotu response_type „token“ za „token id_token“.


public IServiceProvider ConfigureServices(IServiceCollection services)
{

...

services
.AddAuthentication(options => options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme)
.AddJwtBearer(options => ... );

...

services.AddSwaggerGen(c =>
{
...

c.AddSecurityDefinition("oauth2", new OAuth2Scheme
{
Type = "oauth2",
Flow = "implicit",
AuthorizationUrl = "https://accounts.google.com/o/oauth2/v2/auth",
TokenUrl = "https://www.googleapis.com/oauth2/v4/token",
Scopes = new Dictionary<string, string>
{
{ "openid profile email", "Default scopes" }
}
});

c.OperationFilter<AuthorizeCheckOperationFilter>();
});

}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)

{

app.UseSwaggerUI(c =>
{
// Swashbuckle/Swagger podporují jen OAuth. Pro OpenID Connect je potřeba namísto "response_type=token" posílat "response_type=token id_token". To zajistíme hackem v javascriptu.
// Google OAuth navíc vyžaduje parametr nonce, který je v hacku rovněž přidán.
c.InjectOnCompleteJavaScript("/swagger-ui-customization.js");

c.ConfigureOAuth2("client-id", "client-secret", "http://localhost:PORT/swagger/ui/o2c-html", "application-name");
c.SwaggerEndpoint("/swagger/current/swagger.json", "Current");
});

Třída AuthorizeCheckOperationFilter zajišťuje doplnění informací o security pro Swashbuckle/Swagger:


internal class AuthorizeCheckOperationFilter : IOperationFilter
{
public void Apply(Operation operation, OperationFilterContext context)
{
// Alternativní implementace: https://github.com/domaindrivendev/Swashbuckle/blob/master/Swashbuckle.Dummy.Core/SwaggerExtensions/AssignOAuth2SecurityRequirements.cs
// Check for authorize attribute
var hasAuthorize = context.ApiDescription.ControllerAttributes().OfType<AuthorizeAttribute>().Any() || context.ApiDescription.ActionAttributes().OfType<AuthorizeAttribute>().Any();


if (hasAuthorize)
{
// přidá do dokumentace možnou odpověd - 401
operation.Responses.Add("401", new Response { Description = "Unauthorized" });

// přidá informaci o tom, že se má použít pro volání metody authentizační token (zobrazí se červený vykřičník)
operation.Security = new List<IDictionary<string, IEnumerable<string>>>
{
new Dictionary<string, IEnumerable<string>>
{
{ "oauth2", new string[] { "openid profile email" } }
}
};
}
}
}

Dále je potřeba do rootu webu umístit soubor swagger-ui-customization.js, který provádí ukrutný hack nad window.open:


// Swagger UI does not support custom response_type parameters. Azure Active Directory requires an 'id_token' value to
// be passed instead of 'token' (See https://github.com/swagger-api/swagger-ui/issues/1974).
window.swaggerUiAuth = window.swaggerUiAuth || {};
window.swaggerUiAuth.tokenName = 'id_token';

if (!window.isOpenReplaced) {
window.open = function (open) {
return function (url) {
url = url.replace('response_type=token', 'response_type=token%20id_token&nonce=456');
console.log(url);
return open.call(window, url);
};
}(window.open);
window.isOpenReplaced = true;
}

Moderní přístup k JavaScriptu – záznam [Pavel Kříž, HAVIT Vzdělávací okénko 12.10.2017]

Záznam z interního vzdělávacího okénka HAVIT z 12.10.2017 je publikován na našem HAVIT YouTube Channel. Téma prezentoval Pavel Kříž:

Dotčená témata:

  • Transpillers – TypeScript, Babel
  • Flow, ESLint, TSlint,
  • Literal Objects
  • Revealing Module Pattern
  • CommonJS
  • AMD – Asynchronous Module Definition
  • Modules
  • Array
  • Event Loop
  • Asynchronní operace v JS
  • Promise
  • TypeScript – async/await, class, arrow,

ASP.NET MVC Razor: Renderování stringů do JavaScriptu

Pokud se budete pokoušet v Razor-View vytvořit JavaScript přiřazením textových hodnot, můžete si pěkně naběhnout:

var name = '@Model.Name';

Pokud totiž v Model.Name bude nějaká záludnější hodnota, dostanete například:

var name = 'Bož&amp;#237;čku kolekcička&amp;#39;\'  // original: Božíčku kolekcička'\

Taky možná najdete, že existuje HttpUtility.JavaScriptStringEncode() a zkusíte:

var name = '@HttpUtility.JavaScriptStringEncode(Model.Name)';

…což taky nedopadne nejlépe:

var name = 'Bož&amp;#237;čku kolekcička\u0027\\'  // original: Božíčku kolekcička'\

Až nakonec přijdete na to, že je potřeba:

var name = '@Html.Raw(HttpUtility.JavaScriptStringEncode(Model.Name))';

…abyste dostali:

var name = 'Božíčku kolekcička\u0027\\'  // original: Božíčku kolekcička'\

Případně použijete variantu, která si uvozovky (ne apostrofy) doplní sama.

var name = @Html.Raw(Json.Encode(Model.Name));

…z čehož plyne poučení, že se takto string do HTML raději nepokoušejte vůbec emitovat a raději přenášejte JSON objekty.