Create secure code with Secure Code Bootcamp

Software development contains many aspects which the developer has to take care and think about. One of them is information security and secure code which affects the product and its users. There are different ways to learn information security and how to create secure and quality code and this time I'll shortly go through what Secure Code Warrior Secure Code Bootcamp has to offer.

For the record other good resources I've come across are Kontras application security training for OWASP Top 10 and OWASP Top 10 API, hands-on approaches like Cyber Security Base MooC, Wargames, Hack the Box and Cybrary.

Secure Code Bootcamp

Kick-start your journey to creating more secure, quality code with Secure Code Bootcamp - our free mobile app for early-career coders.

Secure Code Bootcamp

Secure Code Warrior provides a learning platform for developers to increase their software security skills and guide each coder along their own preferred learning pathway. They have products, solutions and resources to help organization's development teams to ship quality code and also provide a free mobile app for early-career coder: Secure Code Bootcamp.

Application presents common vulnerabilities from the OWASP Top 10 and you get badges as you progress through each new challenge, unlocking new missions as your progress. It teaches you to identify vulnerable code with first short introductions and explanations for each vulnerability of how they happen and where. Each topic is presented as a mission with briefing and code inspection tasks.

OWASP Top 10 are:

The Secure Code Bootcamp covers 8 of the Top 10 list as the last two are more or less difficult to present in this gamified context, I think.

Mission briefing contains couple of minute theory lesson of the given vulnerability and teaches you what, where and how to prevent it.

After briefing you're challenged with code examples in the language you've chosen (Node.JS, Python:Django, Java:Spring, C# .NET: MVC). You practically swipe your way through code reviews by accepting or rejecting them. Reading code on mobile device screen isn't optimal but suffices for the given task. Works better for Node.js than for Java Spring.

Code inspection isn't always as easy as you would think even if you know what to look for. After succesfully inspected couple of codes you're awarded with a badge. The briefing tells you what to look for in the code but sometimes it's a guess what is asked for. The code inspection requires sometimes knowledge of the used framework and inspection is done without context for the usage. Almost every inspection I got 1 wrong which gave me 75% accuracy.

Summary

The approach to teaching security topics this way works ok if you're code oriented. You'll learn the OWASP Top 10 in practice by short theory lessons with pointers to how to prevent them and test your code inspection skills for noticing vulnerable aspects of code fragments. Having swiped through the bootcamp the code inspection parts were not always so useful.

The marketing text says "progress along multiple missions and build secure coding skills." and "Graduate with fundamental secure coding skills for your next step as a coder." and that is in my opionion a bit much to say. The bootcamp teaches the basic concepts of vulnerabilities and how they look on code but doesn't teach you to code securily.

In overall the Secure Code Bootcamp for OWASP Top 10 vulnerabilities is a good start for learning what, where, how and why vulnerabilities exists and learn to identify them. You can do the bootcamp with different languages available so replayability value is good.

Short notes on tech 28/2021

Week 28 of 2021

CSS

CSS system colors
"Jim Nielsen reveals the system colors we can use in CSS and how useful this can be for light and dark mode themes." (from WDRL)

Cloud

The Gamer Guide to Playing Amazon Web Services (AWS)
"This is such a nice article, sharing a getting started guide for AWS, in a similar style to the getting started guides that many experienced MMORPG players write for new players." (from Cloud Security Reading List)

Best practices for securing Identity and Access Management on AWS
"Post looking at different approaches to help keep IAM configuration tidy, auditable and right-sized." (from Cloud Security Reading List)

Uncomplicate Security for developers using Reference Architectures
"Walk through some of the salient features of a meaningful security reference architecture and the process required to develop one." (from Cloud Security Reading List)

Software development

A curated list of books on Software Architecture

Starting with React Native and Expo

For some time I've wanted to experiment with React Native and mobile development outside native iOS but there has always been something on the way to get really started with it. Recently I had time to watch React Europe 2020 conference talks and "On Expo and React Native Web" by Evan Bacon got me inspired.

All the talks in React Europe 2020 can be found in their playlist on Youtube

Universal React with Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

Expo

"Expo: Universal React" talk showed what Expo can do and after some hassling around with Expo init templates I got a React Native app running on iOS for reading news articles from REST API with theme-support and some navigation written with TypeScript. And it also worked on Android, Web and as a PWA.

Expo is a toolchain built around React Native to help you quickly start an app. It provides a set of tools that simplify the development and testing of React Native app and arms you with the components of users interface and services that are usually available in third-party native React Native components. With Expo you can find all of them in Expo SDK.

Understanding Expo for React Native

You can use the Expo Snack online editor to run you code in iOS, Android and Web platforms. And if you need vector icons, there's and app for searching them. Also Build icon app is crafty.

Expo has good documentation to get you started and following the documentation (and choosing the managed workflow when initing an app) you get things running on your device or on iOS and Android simulators. If you don't have a macOS or iPhone you can use their Snack playground to see how it looks on iOS.

Expo comes with a client which you can use to send the app to your device or to others for review which is very useful when testing as you can see all changes in code in Expo client without creating apk or ipa files.

One great feature of Expo is that you can quickly test and show examples of solutions with the Snack editor and run the code either on the integrated simulator or on your device.

I've previously quickly used Ignite which has a different approach to get you running and compared to that Expo is more of a platform than just tools which has it's good and not so good points. One of the main points of Expo is that it practically binds you to Expo and their platform where as if you use only tools you're "more free".

Drawbacks

The "Understanding Expo for React Native" post lists the following drawbacks in managed workflow. Some of those can be work aroud with bare workflow or with ejecting but then you lose the advantages of Expo workflow:

  1. Can't add native modules written in Objective-C, Swift, Java, Kotlin
  2. Can't use packages with native languages that require linking
  3. App has a big size as it is built with all Expo SDK solutions
  4. Often everything works well in Expo client but problems may occur in a standalone app.

Feelings

This far I've just started with Expo and getting more adjusted to React Native and writing Highlakka news client has been insightful and good experience when comparing the same app, "Highkara", written in Swift for iOS. My plan is to implement some of the features in Highlakka as in Highkara and see how it works as an universal app. Especially the PWA is interesting option and Over the Air updates with Expo as shown in React Europe 2020 talk.

The Hailakka app is now "usable" and iOS app builds nicely with Expo Turtle. The PWA runs on Netlify which is great.

Tools

What about tools to help you with React Native development? Basically you can just use VS Code and go on with it.

Flipper DevTool Platform for React Native talk at React Europe 2020 by Michel Weststrate and "Flipper — A React Native revolution" post shows one option. It's baked into React Native v0.62 but isn't yet available with Expo 41 (there's feature request for it and suggestions to use what Expo offers like React Native debugger and Redux devTools integration).

Build tools

Expo provides tools for building your application and Expo Dashboard shows your builds and their details. You can download the IPA packaged app when the build is ready and then upload it to App Store Connect.

You can build your application to different platforms with Expo cli. For example PWA with expo build:web and iOS with expo build:ios. And you can also do it from CI. Of course you still need Apple account for submitting the app to the App Store.

While your build is running you can check the queue from Turtle.

Short notes on tech 26/2021

Week 26 of 2021

Team

An incomplete list of skills senior engineers need, beyond coding

  1. How to run a meeting, and no, being the person who talks the most in the meeting is not the same thing as running it
  2. How to write a design doc, take feedback, and drive it to resolution, in a reasonable period of time
  3. How to mentor an early-career teammate, a mid-career engineer, a new manager who needs technical advice
    (from Weekend Reading)

Learn

How to Handle Secrets on the Command Line
"Keeping secrets secret on the command line requires some extra care and effort."

Something different

Myths Debunked: Wide Tires Are NOT Slower

Linting GraphQL Schema and queries

Analyzing code for compliance with guidelines is one part of the code quality assuarance and automating it with tools like ESLint and binding the checks with build process is common and routine operation. But what about validating GraphQL schema and queries? Here are some pointers to tools you can use to start linting your GraphQL schema.

Resources:

  • eslint-plugin-graphql: Checks tagged query strings inside JavaScript, or queries inside .graphql files, against a GraphQL schema.
  • graphql-eslint: Lints both GraphQL schema and GraphQL operations.
  • graphql-schema-linter: Command line tool to validate GraphQL schema definitions against a set of rules.
  • apollo-tooling: Brings together your GraphQL clients and servers with tools for validating your schema, linting your operations and generating static types.

Using ESLint for GraphQL checks

Depending of you project structure and how you've created your schema and queries you can use different tools for linting it. eslint-plugin-graphql requires you to have the schema ready whereas graphql-eslint can do some checks and validation without the schema.

Using the graphql-eslint and configuration in package.json where the project uses code files to store GraphQL schema / operations:

"eslintConfig": {
...
"overrides": [
      {
        "files": [
          "*.js"
        ],
        "processor": "@graphql-eslint/graphql"
      },
      {
        "files": [
          "*.graphql"
        ],
        "parser": "@graphql-eslint/eslint-plugin",
        "plugins": [
          "@graphql-eslint"
        ],
        "rules": {
          "prettier/prettier": "off",
          "@graphql-eslint/unique-fragment-name": "warn",
          "@graphql-eslint/no-anonymous-operations": "warn",
          "@graphql-eslint/no-operation-name-suffix": "error",
          "@graphql-eslint/no-case-insensitive-enum-values-duplicates": [
            "error"
          ]
        }
      }
    ]
}

Linting process can be enriched and extended with GraphQL type information, if you are able to provide your GraphQL schema.

Introspection Query and schema linting

GraphQL APIs are required to be self-documenting and every standard conforming GraphQL API needs to respond to queries about its own structure. This system is called introspection. The key for GraphQL validation is doing the introspection query and getting the schema in GraphQL Schema Definition Language format. The query gets you the JSON representation of the shape of the API which you can convert to SDL. See more about GraphQL Schemas.

You can use the apollo-tooling for the introspection. First start your GraphQL service and point the apollo to it.

npx apollo client:download-schema --endpoint=http://localhost:4444/graphql schema.graphql

The tooling outputs in this case the schema in GraphQL SDL format (.graphql) and you can also get it in JSON by using the schema.json filename.

Now that you have the GraphQL schema you can lint it by using graphql-schema-linter. Create config graphql-schema-linter.config.js in your project root folder.

module.exports = {
  rules: ['enum-values-sorted-alphabetically'],
  schemaPaths: ['path/to/my/schema/files/**.graphql'],
  customRulePaths: ['path/to/my/custom/rules/*.js'],
  rulesOptions: {
    'enum-values-sorted-alphabetically': { sortOrder: 'lexicographical' }
  }
};

And run graphql-schema-linter

You get results e.g.

1320:1 The type `Upload` is defined in the schema but not used anywhere.                      defined-types-are-used
74:3   The field `Company.phone_number` is not camel cased.                                   fields-are-camel-cased

Running graphql-schema-linter in CI/CD

For automating schema checks you can use the graphql-schema-linter in your CI/CD pipeline. Here's an example for GitLab CI where we run our GraphQL service inside docker.

docker-compose-introspection.yml:

version: '3.1'

services:
  service-graphql-introspection:
    image: node:14-alpine
    container_name: graphql-service-introspection
    restart: unless-stopped
    environment:
      NODE_ENV: development
      ENVIRONMENT: introspection
      PORT: 4000
    ports:
      - "4000:4000"
    user: node
    volumes:
      - ./:/home/node
    working_dir: /home/node
    command: "npm run start:docker"

Where npm run start:docker is "./node_modules/nodemon/bin/nodemon.js --legacy-watch --exec ./node_modules/@babel/node/bin/babel-node.js src/app.js"

gitlab-ci.yml:

run_test:
  image: docker:19.03.1
  stage: test
  services:
    - docker:19.03.1-dind
  before_script:
    - apk add --no-cache docker-compose npm
  script:
    - "# Start GQL"
    - docker-compose -f docker-compose-introspection.yml up -d
    - "# Get introspection schema"
    - cd /tmp
    - npx apollo client:download-schema --endpoint=http://localhost:4000/graphql schema.graphql
    - cd $CI_PROJECT_DIR
    - docker-compose -f docker-compose-introspection.yml stop
    - docker-compose -f docker-compose-introspection.yml rm -f
    - "# Run tests"
    - npx graphql-schema-linter /tmp/schema.graphql

The results in CI/CD pipeline could look then like this:

graphql-schema-linter in CI/CD

Short notes on tech 23/2021

Week 23 of 2021

Infosec

CitySec Mayhem presentations playlist
"Five Ways To Fail At Crime, Spotting the Storm: Attack Detection in the Cloud, Hunted: From Wanted Blackhat to Celebrated Whitehat, Plug - Silver Sparrow And The Tale Of The Mysterious Insu File, Forensics Crash Course, Find & kill your WordPress intruder with bare hands (and logs)"

Awesome Node.js Security resources
Static code analysis, input validation, middleware, reading material, and more.

Learning

Production Ready GraphQL book
Learn how to design and build predictable, performant, and secure GraphQL APIs at scale.

User interface and experience

Apple Design Resources

😈 Doom Captcha

Something else

Soviet Brutalist Architecture Photographed by Frederic Chaubin

Take a Ride With Me
"Watch cyclists ride down hill form the comfort of your own saddle. Better with sound on. Website takes forever to load, so open in background, and check on it in a minute." (from Weekend Reading)

Short notes on tech 20/2021

Week 2o of 2021

Learn

The UI & UX Tips Collection: Volume Two
Round two, more UI/UX tips, simply explained and beautifully illustrated. (from Weekend Reading)

Modern Javascript: Everything you missed over the last 10 years
"JavaScript has come a long way since I knew it as the “D” in DHTML. For anyone like me, who’s been reluctant to use the latest syntax that could require polyfills or a transpiler, I’ve written this cheatsheet to get you caught up on all the goodness that’s widely supported in modern browsers."

The Instagram ads Facebook won’t show you
Signal runs multi-variant Instagram ad that show people the data that Facebook collects about them. Not surprisingly, Facebook shut it down. (from Weekend Reading)

Software development

The 10 Best Practices for Remote Software Engineering
tl;dr;

  • Work on Things You Care About.
  • Define Goals for Yourself.
  • Define Productivity for Yourself.
  • Establish Routine and Environment.
  • Take Responsibility for Your Work.
  • Take Responsibility for Human Connection.
  • Practice Empathetic Review.
  • Have Self-Compassion.
  • Learn to Say Yes, No, and Not Anymore.
  • Choose Correct Communication Channels.

The True Meaning of Technical Debt
Reframing technical debt as a disagreement between business needs and how the software has been written. (from Weekend Reading)

AccessAbility Playbook
A fantastic guide to delivering accessible and inclusive client services. (from CSS Weekly)

Security

Docker Security Cheat Sheet
Cheat sheet aiming to provide an easy to use list of common security mistakes and good practices that will help you secure your Docker containers. (from Cloud Security Reading List)

Tools of the trade

Photopea: A free alternative to Photoshop used by millions of people
Made by one developer, Hacker news thread.

Short notes on tech 15/2021

Week 15 of 2021

Backend development

OpenAPI tools

Building REST API with Express, TypeScript and Swagger

A categorized list of all Java and JVM features since JDK 8 to 16
"Since the release of version 8, up to version 16, Java is shaped by 180 JDK Enhancement Proposals, each of which brings some improvement to the platform." The JDK you knew years ago is nowadays quite a different beast.

Learning

A11ycasts with Rob Dodson
"Want to build accessible apps? Rod Dodson is teaching those fundamentals in his new series dedicated entirely to the art of accessibility. Meet A11ycasts!"

Practical Cryptography for Developers
"A modern practical book about cryptography for developers with code examples"

A B2B Product Management Story
"On discovering problems that customers actually care about. Very visual story thread."

Security

kubernetes-simulator
"A distributed systems and infrastructure simulator for attacking and debugging Kubernetes: simulator creates a Kubernetes cluster for you in your AWS account; runs scenarios which misconfigure it and/or leave it vulnerable to compromise and trains you in mitigating against these vulnerabilities." (from Cloud Security Reading List)

The worst so-called “best practice” for Docker
"Please install security updates"

Tools of the trade

Icecream: Never use print() to debug again in Python

Something different

Meet Stretch from Boston Dynamics
"Prototype of robot designed to automate box moving tasks in warehouses and distribution centers: unloading trucks, building pallets of boxes and order building. Stretch makes warehouse operations more efficient and safer for workers."

Short notes on tech 13/2021

Week 13 of 2021

Learn

SMS: Substitutable Message Service
"Replacing the content of previously sent SMSs is actually possible."

Emoji under the hood
How “biggest innovation in human communication since the invention of the letter 🅰️” works under the hood.

Tools of the trade

Pyright
Static type checker for Python.

lazydocker
A simple terminal UI for both docker and docker-compose, written in Go with the gocui library.

Codetour
"CodeTour is a Visual Studio Code extension, which allows you to record and playback guided walkthroughs of your codebases. It's like a table of contents, that can make it easier to onboard (or re-board!) to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change."

Responsively
"Develop responsive web apps 5x faster! A must-have DevTool for all Front-End developers."

Permissions
A simple site to test permission-related UI for web APIs.

Simulator Status Magic
"Modify the iOS Simulator so that it has a perfect status bar, then run your app and take perfect screenshots every time."

Cloud

Security Logging in Cloud Environments - GCP
"If you had to architect a multi-account security logging strategy, where should you start?" (from Cloud Security Reading List)

Something different

Ask HN: What was the biggest contributor to your happiness in the past year?
"Video walks on Youtube."

Automate your dependency management using update tool

Software often consists of not just your own code but also is dependent of third party libraries and other software which has their own update cycle and new versions are released now and then with fixes to vulnerabilities and with new features. Now the question is what is your dependency management strategy and how do you automate it?

Fortunately automated dependency updates for multiple languages is a solved problem as there are several update tools to help you: Renovate, Dependabot (GitHub), Greenkeeper ($), Depfu ($) and Dependencies.io ($) to name some alternatives. In this blog post I will concentrate on using Renovate and integrate it with GitLab CI.

Renovate your dependencies

Renovate is open source tool which works with most git hosting platforms (public or self-hosted) and it's possible to host Renovate Bot yourself. It’s installable via npm/yarn or Docker Hub.

In short, the idea and workflow of dependency update tools are following:

  1. Checks for updates: pulls down your dependency files and looks for any outdated or insecure requirements.
  2. Opens pull requests: If any of your dependencies are out-of-date, tool opens individual pull requests to update each one.
  3. Review and merge: You check that your tests pass, scan the included changelog and release notes, then hit merge with confidence.

Now you just run the depedency update tool on regular basis on your continuous integration, watch how the pull requests fly and you get to keep your dependencies secure and up-to-date.

The manual chore of checking for updates, looking for changelogs, making changes, running tests, writing pull requests and more is now moved to reviewing pull requests with better confidence of what has changed.

Self-hosted in GitLab CI

Renovate Bot is a node.js application so you’ve couple of alternative ways to run it on your CI/CD environment. You can use a node docker image which installs and runs renovate, or you can use Renovate Bot's own Docker image as I chose to do. We are using docker-in-docker approach of running the Renovate docker container. That means you can start Docker containers from within an other Docker container.

First create an  account for the bot on the Gitlab instance (the best choice) or use your own account. Then generate a personal access token with the api scope for renovate to access the repositories and create the branches and merge requests containing the dependency updates.

Then create a repository for the configuration and renovate will use that repo’s CI pipelines. Paste your Gitlab token under CI / CD > Variables as a new variable and give it the name RENOVATE_TOKEN. Set it to protected and masked to hide the token from the CI logs and to only use it for Pipelines starting on protected branches (your master branch is protected by default).

You'll also need a Github access token with the repos scope for renovate to read sources and changelogs of dependencies hosted on Github. It’s not important what Github account is used as it's just needed because Github's rate-limiting would block your bot making unauthenticated requests. Paste it as an other variable with the name GITHUB_COM_TOKEN.

To configure Renovate we need to add three files to our repository:

config.js for configuring renovate:

module.exports = {
  platform: ‘gitlab’,
  endpoint: ‘https://gitlab.com/api/v4/',
  assignees: [‘your-username’],
  baseBranches: [‘master’],
  labels: ['renovate', 'dependencies', 'automated'],
  onboarding: true,
  onboardingConfig: {
    extends: ['config:base'],
  },
};

repositories.txt for repositories we want to check:

openpatch/ui-core
openpatch/template

.gitlab-ci.yml to run renovate:

default:
  image: docker:19
  services:
    - docker:19-dind

# Because our GitLab runner doesn’t have TLS certs mounted and runs on K8s
variables:
  DOCKER_HOST: tcp://localhost:2375
  DOCKER_DRIVER: overlay2
  DOCKER_TLS_CERTDIR: ‘'

renovate:
  stage: build
  script:
    - docker run -e RENOVATE_TOKEN="$RENOVATE_TOKEN" -e GITHUB_COM_TOKEN="$GITHUB_COM_TOKEN" -v $PWD/config.js:/usr/src/app/config.js renovate/renovate:13 $(cat repositories.txt | xargs)
  only:
    - master

Now everything is finished and when you run the pipeline renovate will check the repositories in repositories.txt and create merge request if a dependency needs to be updated.

The first merge request to repository is Configure Renovate which helps you to understand and configure settings before regular Merge Requests begin.

As a last step create a Pipeline Schedule to run the pipeline every x hours or x day or whatever you like. You can do this in the bot's config project / repository under CI / CD > Schedules by creating a new schedule and chosing the frequency to run your bot.

You can also reduce noise by Package Grouping and Automerging. Here’s an example of grouping eslint themed packages and automerging them if tests pass.

Project’s renovate.json:

{
    "packageRules": [
        {
          "packagePatterns": [ "eslint" ],
          "groupName": "eslint",
          "automerge": true,
          "automergeType": "branch"
        }
      ]
}

Summary

Congratulations! You’ve now automated the dependency updating with GitLab CI. Just keep waiting for the merge requests and see if your test suites are successful.  If you are really trusting your test suite, you can even let renovate auto-merge the request, if the pipeline succeeds.