Forem: Masayoshi Haruta

How to Force GitHub Actions to Light Theme Using Tampermonkey

Masayoshi Haruta — Sat, 29 Jun 2024 04:23:06 +0000

Introduction

I'm not a fan of dark mode. Due to my astigmatism, the text appears blurry, and high-contrast themes are extremely straining on my eyes.

One of the painful is GitHub Actions console.

The text is a very bright white, and the font appears small and bold, making it very difficult to look at. Debugging or any prolonged work becomes unbearable as I can't stare at the screen for long periods.

Even after selecting the Light theme in Theme preferences, this issue wasn't resolved.
https://github.com/settings/appearance

To solve this, I decided to use Tampermonkey to force GitHub Actions pages to use the Light Theme. Here’s what the final result looks like.

What is Tampermonkey

Tampermonkey is a browser extension that allows you to run custom JavaScript on any website. In short, it's a user script.
https://www.tampermonkey.net/

It supports almost all browsers. As a Chrome user, I’ll show you how to set it up on Chrome.

Setting

Here's the downloaded URL: https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja

After downloading, launched the extension.

Create a new style by clicking on + button.

Now, let's create the style.

Here's snippet.

// ==UserScript==
// @name         Remove data-dark-theme attributes
// @namespace    http://tampermonkey.net/
// @version      2024-06-23
// @description  Remove data-dark-theme attributes from GitHub Actions console
// @author       masayoshi haruta
// @match        https://github.com/*/*/actions/runs/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=github.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to remove data-dark-theme attribute from all elements
    function removeDataDarkThemeAttributes() {
        // Get all elements with the data-dark-theme attribute
        var elements = document.querySelectorAll('[data-dark-theme]');

        // Loop through the elements and remove the attribute
        elements.forEach(function(element) {
            element.removeAttribute('data-dark-theme');
        });
    }

    // Run the function once the DOM is fully loaded
    document.addEventListener('DOMContentLoaded', removeDataDarkThemeAttributes);

    removeDataDarkThemeAttributes()
})();

Header

Fill in the properties in the header section. These fields are intuitive and easy to fill out. One key point is using @match with a regular expression to apply the user script to all GitHub Actions run pages, https://github.com/*/*/actions/runs/*

If you have any questions, please refer this. https://www.tampermonkey.net/documentation.php?locale=en

Script

The script is straightforward, removing the dark theme attribute from all elements after the DOM is fully loaded.

Finally, save the script with Command+S to complete.

When you access the page, you can confirm that Tampermonkey is applied.

Appendix

That concludes the Tampermonkey setup. However, I’d like to add a note about the green color seen in the screenshot. You might wonder how the green color is assigned and if white text becomes hard to read with the light theme.

I used Stylus to adjust the colors, and forcefully changing white text to black. While I think this isn’t the cleanest method, it’s effective.

.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) {
    background: #99ffcc 
}

.color-text-white {
    color: black  !important;
}

If you are new to Stylus, please refer to the following article. It describes the installation procedure and I guess it's useful.

How to Customize Slack Fonts Using Stylus for Improved Readability

Masayoshi Haruta ・ Jun 29

#stylus #css #slack

Happy CI/CD running!

How to Customize Slack Fonts Using Stylus for Improved Readability

Masayoshi Haruta — Sat, 29 Jun 2024 00:40:52 +0000

Introduction

I often use Slack and have been struggling with its default font, which I find hard to read and strains my eyes.

While using the Slack command (e.g., /slackfont helvetica) allows you to change the font freely, it reverts to the default at specific times, such as when the session expires. This issue is particularly inconvenient for me as I use the Slack browser ver, and the font reverts to default every time I restart it.

To solve this problem, I decided to use the Stylus extension.

Why/What is Stylus?

Stylus is a browser extension that allows you to apply custom CSS to any website.
https://add0n.com/stylus.html

By using this extension, I can ensure that my preferred font size and font style are always applied whenever I open Slack.

Initially, I tried to make the font setting persistent by executing the Slack command (e.g., /slackfont helvetica) periodically. However, Slack commands are designed to be executed manually by a human and cannot be run through API calls, bot postings, or Slack Workflows. When I tried this actually, the command was interpreted as plain text.
Ref: https://stackoverflow.com/questions/39829741/execute-slash-command-as-slack-bot

Setting

Stylus is available for Chrome, Firefox, and Opera. As a Chrome user, I downloaded it from the following URL: https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

After downloading, I launched the extension.

Create a new style by clicking on Write new style.

Now, let's create the style.

①Set a title for this style, e.g., app.slack.com

②Specify the target URL. As for me, to apply this to all Slack instances, use URLs starting with and specify the Slack URLs, https://app.slack.com/client.

③Define the CSS. The following code changes the default slack fonts to Verdana and sets the font size to 16px.



@font-face {
    font-family: "NotoSansJP";
    src: local("Verdana");
}

@font-face {
    font-family: "Slack-Lato";
    src: local("Verdana");
}

@font-face {
    font-family: "Slack-Fractions";
    src: local("Verdana");
}

@font-face {
    font-family: "appleLogo";
    src: local("Verdana");
}

@font-face {
    font-family: "sans-serif";
    src: local("Verdana");
}

* {
    font-size:16px;
}

Finally, click the Save button to save the changes (or use Command/Control + S).

Result

You can see your settings applying.

In the DevTools, you can see them.

Happy Coding!

Got a false positive! AWS WAF HostingProviderIPList may block system linking.

Masayoshi Haruta — Sun, 09 Oct 2022 15:04:59 +0000

I ran into a false positive the other day, so I'd share it; There is a rule AWSManagedRulesAnonymousIpList in AWS WAF v2, use of the HostingProviderIPList in it may need a little care in a particular situation.

What the problem

First, let me explain what the rules are.

RuleName	Detail
AWSManagedRulesAnonymousIpList	Inspects for a list of IP addresses of sources known to anonymize client information, like TOR nodes, temporary proxies, and other masking services.
HostingProviderIPList	Inspects for a list of IP addresses from hosting and cloud providers, which are less likely to source end-user traffic. The IP list does not include AWS IP addresses.

It is a very useful rule set that usually blocks suspicious accesses. However, the other day I decided to integrate the web service with my customer's external system, and when testing, we encountered a problem where communication could not be established and the service was blocked. As a result, we have set the rule set to "Count" and are now observing whether we should really turn off the rule set.

Workaround

I used Terraform to build the WAF, so this will be an explanation using Terraform. The change is quite simple, just add excluded_rule to the rule in the aws_wafv2_web_acl

I hope it will be of some help to anyone who is encountering the same problem.

Appendix

By the way, if you want to build a WAF using Terraform, please refer to my previous article!

How to set up AWS WAF v2 with Terraform

Masayoshi Haruta for AWS Community Builders ・ Jul 15 '22 ・ 7 min read

#aws #security #terraform #cloud

Thank you for reading!

How to use DynamoDB data import

Masayoshi Haruta — Sat, 10 Sep 2022 12:38:30 +0000

Introduction

Last month updated, DynamoDB has provided a data import feature🎉 (Reference). New tables can be created by importing data in S3 buckets.

The data export to S3 has been available so far, but now import is finally possible, and the combination of the two makes it possible to create and restore backups easily and conveniently!

I used this feature this time because I needed to redesign the DynamoDB partition key and sort key, and it was very useful. I know that many people have written scripts for data import when recreating Dynamo (I did too), but from now on, scripts are no longer necessary😎!

Please refer to the following instructions💡

How to use

1. Export data to S3

Firstly, I export data to an S3 bucket. So I access the DynamoDB table and use the Export to S3 feature.

Set your S3 bucket and wait for the executed.

Done!

2. Import data from S3

Now, I do the import feature using the exported data. Access to the "Imports from S3" menu from left side menu.

Set the import data information. Please note that S3 Exported data will be GZIP and JSON format by default.

Note that as for Source S3 URL, the imported data resides in the bucket's data directory, so the URL selection should be set the data directory.

Determine the table name, partition key, etc. to be imported.

Table settings can also be selected.(I set default here)

If all is well, press the Import button to execute.

Done!

3. Confirm the result

I have successfully confirmed that the table exists!

I also looked at it from NoSQL Workbench! I can confirm that the metadata is set correctly, including the various keys I have set.

Conclusion

Import function, extremely useful🤣🤣🤣
It would be very good when restoring from backups, recreating key settings, etc.😇😇😇

Thank you for reading!

How to use Amazon Cognito with React/TypeScript and Terraform

Masayoshi Haruta — Sun, 17 Jul 2022 09:40:00 +0000

Introduction

I recently created a login page in React/TypeScript that was surprisingly easy to implement using Amazon Cognito, so I wanted to share it with you. As a sample app, the demo is intended to be really simple, so I think this tutorial can be done in 15~30 minutes.

I would be very happy if Cognito could be used as a secure and easy to use AWS service for modern front-end development and so on.

Prerequisite

Amazon Cognito is created with AWS CLI and Terraform.
Demo App is developed in React/TypeScript, and Chakra UI

Details will be as follows, please set up if necessary.

name	version
AWS CLI	2.6.0
Terraform CLI	1.1.0
react	18.2.0
typescript	4.6.2
react-router-dom	6.3.0
chakra-ui/react	2.2.4
aws-amplify	4.3.27

Sample Codes

Here are sample codes. I also wrote an example in the blog, but it would be too long to write everything, so I have abbreviated some of the information.

If you want to see the full codes, and run the demo, please refer to this GitHub repository.
Also, If you would like to try it out first, please refer to Quick Setup in README.md.

How to Set up

Create Amazon Cognito
- Create Cognito
- Create user
Develop React App
- Install libraries
- Develop login UI
In conclusion

1. Create Amazon Cognito

⚠️ The steps require AWS Credential information. Please make sure your credential info has been set up.

Create Cognito

Create a Cognito User pool and its client app. I am using Terraform, so here is the documentation.

In this case, the setup is simple because the user pool is used for login. The Terraform codes have only a few lines(※The below is full codes, not snippets). I think Cognito is so easy to set up and help developer reduce the burden of developing.

infra/main.tf



resource "aws_cognito_user_pool" "pool" {
  name = "congnito-sample-user-pool"
}

resource "aws_cognito_user_pool_client" "client" {
  name          = "cognito-sample-user-pool-app-client"
  user_pool_id  = aws_cognito_user_pool.pool.id
}

Create user

Next, create a simple User for testing. Please refer to the following AWS CLI command.
⚠️ Please don't forget to TYPE YOUR USERPOOL ID before running these commands.

Create a user



aws cognito-idp admin-create-user  --user-pool-id "{Please type your userpool id}"  --username "test-user-paprika"

Setting a password



aws cognito-idp admin-set-user-password --user-pool-id "{Please type your userpool id}" --username "test-user-paprika" --password 'Password1234#' --permanent

※The User Pool Id can be confirmed from Management Console as below.

Also, confirm that the user information is displayed as shown above. If the Confirmation Status is set to "CONFIRMED", the password has been registered. Please make sure that the Status is set to "Enabled" just to be sure.

Then, completes the setup! Let's implement an application to use it.

2. Develop React App

Again note that only the important parts of the code are listed here as snippets.
If you want to see the all codes, please see the GitHub Repository!

1. Install Library

Create a Project.



npx create-react-app app --template typescript

After changing the directory, (running cd app), install the below libraries.



npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons
npm install react-router-dom
npm install --save-dev @types/react-router-dom
npm install aws-amplify

Then, unnecessary files created by create-react-app, such as logo.svg, are not used, so it may be a good idea to delete them if you want.

2. Develop Login UI

Then, let's start coding! The following is the directory structure, so I will mainly create files under src.



.
├── .env
├── .gitignore
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.tsx
│   ├── components
│   │   └── PrivateRoute.tsx
│   ├── config
│   │   └── auth.ts
│   ├── hooks
│   │   └── useAuth.tsx
│   ├── index.tsx
│   └── pages
│       ├── SignIn.tsx
│       └── Success.tsx
└── tsconfig.json

First, I will create a config file to use Cognito.

app/src/config/auth.ts



export const AwsConfigAuth = {
    region: process.env.REACT_APP_AUTH_REGION,
    userPoolId: process.env.REACT_APP_AUTH_USER_POOL_ID,
    userPoolWebClientId: process.env.REACT_APP_AUTH_USER_POOL_WEB_CLIENT_ID,
    cookieStorage: {
        domain: process.env.REACT_APP_AUTH_COOKIE_STORAGE_DOMAIN,
        path: "/",
        expires: 365,
        sameSite: "strict",
        secure: true,
    },
    authenticationFlowType: "USER_SRP_AUTH",
};

To switch environment variables, add a .env.local file as below.

⚠️ Please don't forget to type YOUR COGNITO USERPOOL INFORMATION.

app/.env.local



REACT_APP_AUTH_REGION={Please type aws region you want to use}
REACT_APP_AUTH_USER_POOL_ID={Please type your user id}
REACT_APP_AUTH_USER_POOL_WEB_CLIENT_ID={Please type your client id}
REACT_APP_AUTH_COOKIE_STORAGE_DOMAIN=localhost

The client ID can be viewed from the following page

If you have forgotten your UserPool ID, please refer to 2. Create user.

Now, Integrated App with Cognito has finished!

Next, prepare useAuth hooks that summarize the authentication process, context, and state.

app/src/hooks/useAuth.tsx



import Amplify, { Auth } from "aws-amplify";
import React, { createContext, useContext, useEffect, useState } from "react";
import { AwsConfigAuth } from "../config/auth";

Amplify.configure({ Auth: AwsConfigAuth });

interface UseAuth {
    isLoading: boolean;
    isAuthenticated: boolean;
    username: string;
    signIn: (username: string, password: string) => Promise<Result>;
    signOut: () => void;
}

interface Result {
    success: boolean;
    message: string;
}

type Props = {
    children?: React.ReactNode;
};

const authContext = createContext({} as UseAuth);

export const ProvideAuth: React.FC<Props> = ({ children }) => {
    const auth = useProvideAuth();
    return <authContext.Provider value={auth}>{children}</authContext.Provider>;
};

export const useAuth = () => {
    return useContext(authContext);
};

const useProvideAuth = (): UseAuth => {
    const [isLoading, setIsLoading] = useState(true);
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [username, setUsername] = useState("");

    useEffect(() => {
        Auth.currentAuthenticatedUser()
            .then((result) => {
                setUsername(result.username);
                setIsAuthenticated(true);
                setIsLoading(false);
            })
            .catch(() => {
                setUsername("");
                setIsAuthenticated(false);
                setIsLoading(false);
            });
    }, []);

    const signIn = async (username: string, password: string) => {
        try {
            const result = await Auth.signIn(username, password);
            setUsername(result.username);
            setIsAuthenticated(true);
            return { success: true, message: "" };
        } catch (error) {
            return {
                success: false,
                message: "LOGIN FAIL",
            };
        }
    };

    const signOut = async () => {
        try {
            await Auth.signOut();
            setUsername("");
            setIsAuthenticated(false);
            return { success: true, message: "" };
        } catch (error) {
            return {
                success: false,
                message: "LOGOUT FAIL",
            };
        }
    };

    return {
        isLoading,
        isAuthenticated,
        username,
        signIn,
        signOut,
    };
};

app/src/components/PrivateRoute.tsx



import { Navigate } from "react-router-dom";
import { useAuth } from "../hooks/useAuth";

type Props = {
    children?: React.ReactNode;
};

const PrivateRoute: React.FC<Props> = ({ children }) => {
    const { isAuthenticated } = useAuth();
    return isAuthenticated ? <>{children}</> : <Navigate to="/signin" />;
};

export default PrivateRoute;

Then, create the pages; top page, login page, and login success page.

app/src/pages/SignIn.tsx



export function SignIn() {
    const auth = useAuth();
    const navigate = useNavigate();
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const executeSignIn = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        const result = await auth.signIn(username, password);
        if (result.success) {
            navigate({ pathname: "/success" });
        } else {
            alert(result.message);
        }
    };

    return (
        <Flex justify={"center"}>
            <VStack h={500} justify="center">
                <form noValidate onSubmit={executeSignIn}>
                    <Box>
                        <FormLabel htmlFor="username">User Name</FormLabel>
                        <Spacer height="10px" />
                        <Input
                            type="text"
                            placeholder="UserID"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            size="lg"
                        />
                    </Box>
                    <Spacer height="20px" />
                    <FormLabel htmlFor="password">Password</FormLabel>
                    <Input
                        type="password"
                        placeholder="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        size="lg"
                    />
                    <Spacer height="35px" />
                    <Stack align="center">
                        <Button type="submit" colorScheme="teal" size="lg">
                            Login
                        </Button>
                    </Stack>
                </form>
            </VStack>
        </Flex>
    );
}

app/src/pages/Success.tsx



export function SuccessPage() {
    const auth = useAuth();

    if (auth.isLoading) {
        return <Box />;
    }

    return (
        <PrivateRoute>
            <VStack h={500} justify="center" spacing={8}>
                <Text fontSize="5xl">Welcome {auth.username}!!</Text>
                <Text fontSize="4xl">Login Succeed🎉</Text>
                <Button
                    colorScheme="teal"
                    size="lg"
                    onClick={() => auth.signOut()}
                >
                    Log out
                </Button>
            </VStack>
        </PrivateRoute>
    );
}

The top page is contained with App.tsx.

app/src/App.tsx



function App() {
    const auth = useAuth();

    if (auth.isLoading) {
        return <Box />;
    }

    const TopPage = () => (
        <Flex justify={"center"}>
            <VStack h={500} justify="center" spacing={8}>
                <Text fontSize="5xl">Cognito Test</Text>
                <Text fontSize={"3xl"}>
                    {auth.isAuthenticated
                        ? "STATUS: LOGIN"
                        : "STATUS: NOT LOGIN"}
                </Text>
                <Link to="/signin">
                    <Text fontSize={"2xl"}>
                        Go to LoginPage(Click Here){" "}
                        <ExternalLinkIcon mx="4px" />
                    </Text>
                </Link>
            </VStack>
        </Flex>
    );

    return (
        <BrowserRouter>
            <Routes>
                <Route index element={<TopPage />} />
                <Route path="signin" element={<SignIn />} />
                <Route path="success" element={<SuccessPage />}></Route>
                <Route path="*" element={<p>Page Not Found</p>} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Finally, I set the index.tsx including some providers.

app/src/index.tsx



import App from "./App";
import { ProvideAuth } from "./hooks/useAuth";

import * as React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);
root.render(
    <React.StrictMode>
        <ChakraProvider>
            <ProvideAuth>
                <App />
            </ProvideAuth>
        </ChakraProvider>
    </React.StrictMode>
);

In conclusion

Congrats🎉 You've finished developing the Login Page with React and Cognito! Please go to the login page and touch the login demo!

It is amazing how easy it was to create a demo application.
Actually, this blog is focused on simplicity, and Cognito, in particular, requires a lot more configuration when considered for production deployment. You need to prepare a new user registration page, and you need to monitor quotas, and so on.

Also there are many good features, such as using SSO with SAML to make it more convenient, or implementing a login implementation with more secure authentication methods than what we have now.

If there is a response, I would like to write a follow-up on these points!
Thank you for reading!

How to set up AWS WAF v2 with Terraform

Masayoshi Haruta — Fri, 15 Jul 2022 03:33:00 +0000

Introduction

I recently set up AWS WAF v2 and then found it to be a very useful service. I introduce it in this blog!

So far, I have been using professional security vendor-managed rules, but this time I deployed it using the rulesets provided by AWS(AWS Managed Rules), which I found easy to use and very convenient. In this article, I will guide you through the process of building a WAF with AWS Managed Rules via Terraform.

Disclaimer

WAF is a significant service that governs security. What I will set up in this article is not always correct for every case and depends on the product you are setting up.

Setting up a WAF is your own responsibility, and if you are not confident in your ability to self-set up a WAF given the risks involved, I recommend an approach where you enlist the help of a vendor.

Reference

What is AWS WAF?
For those who don't be good at security knowledge, so you can use security vendor consults who AWS WAF security partners are.

How to Set up

Create a Web ACL
Create RuleSets
Attach to CloudFront and ALB & Setting monitoring option

Sample Codes

Here are sample codes. I also wrote an example in the blog, but it would be too long to write everything, so I have abbreviated some of the information. If you want to see the full version, please refer to this GitHub Gist.

1. Create a Web ACL

Web ACL is a central resource.

That provides the following features and so on.

Dashboard
Which rule sets to apply
Which AWS resources to configure
Log and Metrics settings

The setting is so simple, so you can use Management Console easily. As for me, I was set up by Terraform. Here is the document, aws_wafv2_web_acl



resource "aws_wafv2_web_acl" "this" {
  name  = "${var.prefix}-${var.name}"
  scope = "REGIONAL"

  default_action {
    allow {}
  }

  tags = {
    Name = "${var.prefix}-${var.name}"
  }

  visibility_config {
    cloudwatch_metrics_enabled = true
    metric_name                = var.metric_name
    sampled_requests_enabled   = true
  }
}

The above sample is modularized and is used in the form of a call from the main file that serves as the entry point.



module "waf_alb" {
  source        = "../../modules/waf_alb"
  prefix        = local.prefix
  name          = "waf-alb"
  metric_name   = "waf-alb"
  alb_ipsets_v4 = module.waf_ipsets.waf_ipsets_alb_ipv4_arn
  alb_ipsets_v6 = module.waf_ipsets.waf_ipsets_alb_ipv6_arn
  bucket = "aws-waf-logs-api-server-dev-blah-blah-blah
}

2. Create a Rulesets

I use two types of Rulesets, "AWS Managed Rules" and "my own rules."
As the Disclaimer described, the rulesets are so IMPORTANT.
Above all, you have to set appropriate rules, but I hope my setting rules help you something.

My own rules

I set three types of rules.

name	rule
AWSRateBasedRuleDomesticDOS	prevent DOS from domestic
AWSRateBasedRuleGlobalDOS	prevent DOS from global
AWSIPBlackList	prevent Attack based on IP based

Here are Terraform codes; These attributes are also in aws_wafv2_web_acl.



  rule {
    name     = "AWSRateBasedRuleDomesticDOS"
    priority = 1

    action {
      block {}
    }

    statement {
      rate_based_statement {
        limit              = 2000
        aggregate_key_type = "IP"

        scope_down_statement {
          geo_match_statement {
            country_codes = ["JP"]
          }
        }
      }
    }
    visibility_config {
      cloudwatch_metrics_enabled = true
      metric_name                = "AWSRateBasedRuleDomesticDOS"
      sampled_requests_enabled   = true
    }
  }

  rule {
    name     = "AWSRateBasedRuleGlobalDOS"
    priority = 2

    action {
      block {}
    }

    statement {
      rate_based_statement {
        limit              = 500
        aggregate_key_type = "IP"

        scope_down_statement {
          not_statement {
            statement {
              geo_match_statement {
                country_codes = ["JP"]
              }
            }
          }
        }
      }
    }

    visibility_config {
      cloudwatch_metrics_enabled = true
      metric_name                = "AWSRateBasedRuleGlobalDOS"
      sampled_requests_enabled   = true
    }
  }

These two rules can prevent DOS attacks based on rate_based_statement.limit and country_codes. The web service I have set up this time is basically intended only for use from my home country(Japan), so I have divided the range of the rate limit between Japan and overseas.

However, the country_codes may be spoofed, and since the connection restriction by this rule is a time-limited block of 5 minutes, other countermeasures may be safer in case of targeted attacks.

As for the rate based-type detailed rule, please refer to the document.

That's why I set the third rule, AWSIPBlaskList.
In this case, the rule "IP set match" is used to create a list of IPs and prohibit the request from the IP sets.
Here is document



rule {
  name     = "AWSIPBlackList"
  priority = 3

  action {
    block {}
  }

  statement {
    or_statement {
      statement {
        ip_set_reference_statement {
          arn = var.alb_ipsets_v4
        }
      }
      statement {
        ip_set_reference_statement {
          arn = var.alb_ipsets_v6
        }
      }
    }
  }

  visibility_config {
    cloudwatch_metrics_enabled = true
    metric_name                = "AWSIPBlackList"
    sampled_requests_enabled   = true
  }
}

Also, I prepare another module "waf_ipsets" so that I manage blacklist IP sets for utilizing the above rule.



provider "aws" {
  alias  = "us-east-1"
  region = "us-east-1"
}

resource "aws_wafv2_ip_set" "blacklist_alb_ipv4" {
  name               = "${var.prefix}-alb-ipv4"
  scope              = "REGIONAL"
  ip_address_version = "IPV4"
  addresses          = ["127.0.0.1/32"]

  tags = {
    Name = "${var.prefix}-alb-ipv4"
  }
}

resource "aws_wafv2_ip_set" "blacklist_cf_ipv4" {
  name               = "${var.prefix}-cf-ipv4"
  scope              = "CLOUDFRONT"
  provider           = aws.us-east-1
  ip_address_version = "IPV4"
  addresses          = ["127.0.0.1/32"]

  tags = {
    Name = "${var.prefix}-cf-ipv4"
  }
}

resource "aws_wafv2_ip_set" "blacklist_alb_ipv6" {
  name               = "${var.prefix}-alb-ipv6"
  scope              = "REGIONAL"
  ip_address_version = "IPV6"
  addresses          = ["2001:0db8:0000:0000:0000:0000:0000:0001/128"]

  tags = {
    Name = "${var.prefix}-alb-ipv6"
  }
}

resource "aws_wafv2_ip_set" "blacklist_cf_ipv6" {
  name               = "${var.prefix}-cf-ipv6"
  scope              = "CLOUDFRONT"
  provider           = aws.us-east-1
  ip_address_version = "IPV6"
  addresses          = ["2001:0db8:0000:0000:0000:0000:0000:0001/128"]

  tags = {
    Name = "${var.prefix}-cf-ipv6"
  }
}

// ARN
output "waf_ipsets_alb_ipv4_arn" {
  value       = aws_wafv2_ip_set.blacklist_alb_ipv4.arn
  description = "IP sets arn"
}

output "waf_ipsets_cf_ipv4_arn" {
  value       = aws_wafv2_ip_set.blacklist_cf_ipv4.arn
  description = "IP sets arn"
}

output "waf_ipsets_alb_ipv6_arn" {
  value       = aws_wafv2_ip_set.blacklist_alb_ipv6.arn
  description = "IP sets arn"
}

output "waf_ipsets_cf_ipv6_arn" {
  value       = aws_wafv2_ip_set.blacklist_cf_ipv6.arn
  description = "IP sets arn"
}

AWS ManagedRules

Here are the rules I use from ManagedRules provided by AWS.

name	rule
AWSManagedRulesCommonRuleSet	General rules, including those listed in OWASP, CVE, etc.
AWSManagedRulesKnownBadInputsRuleSet	Detection of requests to discover/exploit vulnerabilities.
AWSManagedRulesAmazonIpReputationList	Inspects IPs that have been identified as bots by Amazon threat intelligence. _
AWSManagedRulesAnonymousIpList	Inspects for a list of IPs known to anonymize client information, like TOR nodes, temporary proxies, and other masking services.
AWSManagedRulesSQLiRuleSet	block request patterns associated with exploitation of SQL databases, like SQL injection.
AWSManagedRulesLinuxRuleSet	block request patterns associated with the exploitation of vulnerabilities specific to Linux, including LFI attacks.
AWSManagedRulesUnixRuleSet	block request patterns associated with the exploitation of vulnerabilities specific to POSIX and POSIX-like OS, including LFI attacks.

The app doesn't use WordPress and also PHP, but if you so, you should use WordPress or PHP rulesets. If you are using Windows, I recommend you should choose a ruleset based on Windows OS, not Linux. Please refer to this reference for all of these rulesets. The rulesets also have capacity limits, so please refer to the doc to choose the rules you need.

For your reference, I have included the code I have set up in Terraform.
The AWSManagedRulesCommonRuleSet and AWSManagedRulesKnownBadInputsRuleSet are listed as representatives. Other rules are also set in the same way, specifying their names in the rule.name and rule.priority.

To prevent false positives, these rule sets are set to COUNT Action by overriding the rule setting that BLOCK them.



  rule {
    name     = "AWSManagedRulesCommonRuleSet"
    priority = 10

    statement {
      managed_rule_group_statement {
        name        = "AWSManagedRulesCommonRuleSet"
        vendor_name = "AWS"
      }
    }

    visibility_config {
      cloudwatch_metrics_enabled = true
      metric_name                = "AWSManagedRulesCommonRuleSetMetric"
      sampled_requests_enabled   = true
    }
  }


  rule {
    name     = "AWSManagedRulesKnownBadInputsRuleSet"
    priority = 20

    override_action {
      count {}
    }

    statement {
      managed_rule_group_statement {
        name        = "AWSManagedRulesKnownBadInputsRuleSet"
        vendor_name = "AWS"
      }
    }

    visibility_config {
      cloudwatch_metrics_enabled = true
      metric_name                = "AWSManagedRulesKnownBadInputsRuleSetMetric"
      sampled_requests_enabled   = true
    }
  }

Attach to CloudFront and ALB & Setting monitoring option

Finally, I will associate WAF with AWS resources and configure logging.

In this case, I will show you an example of associating with ALB and CloudFront.

Also, I have chosen to output the logs to S3. Other than output to S3, you can also use Kinesis, and CloudWatch Logs. However, the resource name of the log output destination must always be set to aws-waf-logs-.
Please be careful(document)



resource "aws_s3_bucket" "bucket" {
  bucket = var.bucket
  tags = {
    Name = "${var.prefix}-${var.name}"
  }
}

resource "aws_wafv2_web_acl_logging_configuration" "api_server_waf_log" {
  log_destination_configs = [aws_s3_bucket.bucket.arn]
  resource_arn            = aws_wafv2_web_acl.this.arn
}

// ARN
output "waf_arn" {
  value       = aws_wafv2_web_acl.this.arn
  description = "IP sets arn"
}

output "s3_bucket_arn" {
  value       = aws_s3_bucket.bucket.arn
  description = "S3 bucket arn"
}

The main file calling the module is described below.



module "waf_alb" {

  source        = "../../modules/waf_alb"

  prefix        = local.prefix

  name          = "waf-alb"

  metric_name   = "waf-alb"

  alb_ipsets_v4 = module.waf_ipsets.waf_ipsets_alb_ipv4_arn

  alb_ipsets_v6 = module.waf_ipsets.waf_ipsets_alb_ipv6_arn

  bucket = "aws-waf-logs-api-server-prd-blah-blah"

}

module "waf_ipsets" {

  source = "../../modules/waf_ipsets"

  prefix = local.prefix

  name   = "ip"

}

module "waf_cf" {

  source       = "../../modules/waf_cf"

  prefix       = local.prefix

  name         = "waf-teacher"

  metric_name  = "waf-teacher"

  cf_ipsets_v4 = module.waf_ipsets.waf_ipsets_cf_ipv4_arn

  cf_ipsets_v6 = module.waf_ipsets.waf_ipsets_cf_ipv6_arn

  bucket = "aws-waf-logs-teacher-prd-blah-blah"

}

resource "aws_wafv2_web_acl_association" "api_server_waf" {

  resource_arn = module.hoge_hoge_alb.alb_arn

  web_acl_arn  = module.waf_alb.waf_arn

}

# CloudFront associated with WAF(※Module is not listed here) 

module "cloudfront_waf" {

  source          = "../../modules/cloudfront_spa_cdn"

  prefix          = local.prefix

  name            = "spa-frontend"

  cloudfront_fqdn = local.hoge_teacher_web_frontend_fqdn

  zone_id         = module.route53_zone.zone_id

  web_acl_id      = module.waf_teacher.waf_arn

}

# ALB associated with WAF(※Module is not listed here)

module "hoge_hoge_alb" {

  source                         = "../../modules/alb"

  prefix                         = local.prefix

  name                           = "api-alb"

  vpc_id                         = module.main_vpc.vpc_id

  zone_id                        = module.route53_zone.zone_id

  alb_subnets                    = module.main_vpc.public_subnets

  alb_fqdn                       = local.hoge_study_api_alb_fqdn

  target_group_port              = local.hoge_study_api_server_container_port

  target_group_health_check_path = local.hoge_study_api_server_health_check_path

}

In Conclusion

Congrats🎉 Complete the set up💡
Again, if you want to see full sample, please look at the GitHub Gist.
Happy AWS WAF Life!

How to integrate Datadog Agent in ECS Fargate

Masayoshi Haruta — Thu, 26 May 2022 11:41:00 +0000

Introduction

The other day it was the first time that I set up Datadog Agent in ECS on Fargate. I had a hard time understanding it even after reading the documentation, so I'm writing it down here.

Notes

As the doc mentioned, if you wanna know how to set up EKS on Fargate, please be careful that the doc is different. Look at this document.
Modify your container to the side-car container, not create another container for the setup.
- I'd misunderstood the first time that I had to create another container.
By integrating the Agent, you can get some metrics from ECS Fargate.
- I'll eventually post about how to get the logs!

What the problem

First of all, the document only shows how to create it via WebUI, AWS CLI, or CloudFormation, which is confusing because I used Terraform when I created ECS.

I mean, I wanted to install Datadog Agent on a Fargate already built on Terraform, so I had no idea what to do at first.
But in this case, it is actually just a matter of modifying the task definition that already exists.

How to set up

Here is the my sample task definition, so I mean I only modify this file.



{
    "containerDefinitions": [
        {
            "logConfiguration": {
                "logDriver": "awslogs",
                "options": {
                    "awslogs-group": "hoge-hoge-hoge-dev-cwlg-api-server",
                    "awslogs-region": "ap-northeast-1",
                    "awslogs-stream-prefix": "/ecs"
                }
            },
            "portMappings": [
                {
                    "protocol": "tcp",
                    "containerPort": 8080
                }
            ],
            "command": [
                "sh",
                "-c",
                "npm run prisma:migrate:deploy && npm start"
            ],
            "environment": [
                {
                    "name": "SERVER_PORT_NUMBER",
                    "value": "8080"
                },
                {
                    "name": "AWS_S3_REGION",
                    "value": "ap-northeast-1"
                },
                {
                    "name": "TZ",
                    "value": "Asia/Tokyo"
                },
                {
                    "name": "SLACK_TOKEN",
                    "value": "hoge-99999969-60614-hoge-hoge-mEWS1wNZ0E765VkUvkM7"
                }
            ],
            "secrets": [
                {
                    "name": "DATABASE_URL",
                    "valueFrom": "/hoge-study-dev/api-secret-hoge/HOGE_DATABASE_URL"
                },
                {
                    "name": "IMPORT_PROBLEM_END_POINT_SECRET",
                    "valueFrom": "/hoge-study-dev/api-secret-hoge/HOGE_END_POINT_SECRET"
                },
                {
                    "name": "COGNITO_USER_POOL_ID",
                    "valueFrom": "/hoge-study-dev/api-secret-hoge/HOGE_USER_POOL_ID"
                }
            ],
            "essential": true,
            "pseudoTerminal": true,
            "readonlyRootFilesystem": false,
            "privileged": false,
            "name": "app"
        }
    ],
    "memory": "2048",
    "cpu": "1024",
    "executionRoleArn": "arn:aws:iam::99999999999:role/hoge-dev-role-api-server-exec",
    "taskRoleArn": "arn:aws:iam::99999999999:role/hoge-dev-role-api-server-task",
    "family": "hoge-dev-task-api-server",
    "networkMode": "awsvpc",
    "requiresCompatibilities": ["FARGATE"]
}

It's a sample task def for Datadog agent.



{
    "image": "datadog/agent:latest",
    "logConfiguration": {
        "logDriver": "awslogs",
        "options": {
            "awslogs-group": "/hoge/hoge/datadog-agent-dev",
            "awslogs-region": "ap-northeast-1",
            "awslogs-stream-prefix": "ecs"
        }
    },
    "cpu": 10,
    "memory": 256,
    "mountPoints": [],
    "environment": [
        {
            "name": "ECS_FARGATE",
            "value": "true"
        },
        {
            "name": "DD_PROCESS_AGENT_ENABLED",
            "value": "true"
        },
        {
            "name": "DD_DOGSTATSD_NON_LOCAL_TRAFFIC",
            "value": "true"
        }
    ],
    "secrets": [
        {
            "name": "DD_API_KEY",
            "valueFrom": "/hoge-ssm/DATADOG_API_KEY"
        }
    ],
    "name": "api-server-datadog-agent"
}

What Params

Key	Values	features
image	datadog/agent:latest	Container Image
environment: ECS_FARGATE	true	Set Agent ECS Fargate explicitly
environment: DD_PROCESS_AGENT_ENABLED	true	Enabled live process collect
environment: DD_DOGSTATSD_NON_LOCAL_TRAFFIC	true	Correct Metrics by DogStatsD on UDP8125
secrets: DD_API_KEY	/hoge-ssm/DATADOG_API_KEY	Your Datadog API KEY
name	api-server-datadog-agent	My container name

If you don't have the Datadog API key, you can get the organization page, let's please check the docs

Also, I put the small technique in that example, so I use SSM parameter store to avoid hard cording DD_API_KEY.
If you are interested in the tech, please look at the doc.

Finally, Completed the file💡



{
    "containerDefinitions": [
        {
            "logConfiguration": {
                "logDriver": "awslogs",
                "options": {
                    "awslogs-group": "hoge-hoge-hoge-dev-cwlg-api-server",
                    "awslogs-region": "ap-northeast-1",
                    "awslogs-stream-prefix": "/ecs"
                }
            },
            "portMappings": [
                {
                    "protocol": "tcp",
                    "containerPort": 8080
                }
            ],
            "command": [
                "sh",
                "-c",
                "npm run prisma:migrate:deploy && npm start"
            ],
            "environment": [
                {
                    "name": "SERVER_PORT_NUMBER",
                    "value": "8080"
                },
                {
                    "name": "AWS_S3_REGION",
                    "value": "ap-northeast-1"
                },
                {
                    "name": "TZ",
                    "value": "Asia/Tokyo"
                },
                {
                    "name": "SLACK_TOKEN",
                    "value": "hoge-99999969-60614-hoge-hoge-mEWS1wNZ0E765VkUvkM7"
                }
            ],
            "secrets": [
                {
                    "name": "DATABASE_URL",
                    "valueFrom": "/hoge-study-dev/api-secret-hoge/HOGE_DATABASE_URL"
                },
                {
                    "name": "IMPORT_PROBLEM_END_POINT_SECRET",
                    "valueFrom": "/hoge-study-dev/api-secret-hoge/HOGE_END_POINT_SECRET"
                },
                {
                    "name": "COGNITO_USER_POOL_ID",
                    "valueFrom": "/hoge-study-dev/api-secret-hoge/HOGE_USER_POOL_ID"
                }
            ],
            "essential": true,
            "pseudoTerminal": true,
            "readonlyRootFilesystem": false,
            "privileged": false,
            "name": "app"
        },
        ,
        {
            "image": "datadog/agent:latest",
            "logConfiguration": {
                "logDriver": "awslogs",
                "options": {
                    "awslogs-group": "/hoge/hoge/datadog-agent-dev",
                    "awslogs-region": "ap-northeast-1",
                    "awslogs-stream-prefix": "ecs"
                }
            },
            "cpu": 10,
            "memory": 256,
            "mountPoints": [],
            "environment": [
                {
                    "name": "ECS_FARGATE",
                    "value": "true"
                },
                {
                    "name": "DD_PROCESS_AGENT_ENABLED",
                    "value": "true"
                },
                {
                    "name": "DD_DOGSTATSD_NON_LOCAL_TRAFFIC",
                    "value": "true"
                }
            ],
            "secrets": [
                {
                    "name": "DD_API_KEY",
                    "valueFrom": "/hoge-dev/api-secret-hoge/DATADOG_API_KEY"
                }
            ],
            "name": "api-server-datadog-agent"
        }
    ],
    "memory": "2048",
    "cpu": "1024",
    "executionRoleArn": "arn:aws:iam::99999999999:role/hoge-dev-role-api-server-exec",
    "taskRoleArn": "arn:aws:iam::99999999999:role/hoge-dev-role-api-server-task",
    "family": "hoge-dev-task-api-server",
    "networkMode": "awsvpc",
    "requiresCompatibilities": ["FARGATE"]
}

For those who have trouble setting up Datadog RUM

Masayoshi Haruta — Sat, 21 May 2022 09:53:27 +0000

Introduction

If anyone has trouble setting up Datadog RUM, I would like to tell them, "The setup code for JS/NPM version has some incorrect." I have previously texted Datadog support about the feedback, but it has not been fixed, so I wrote it.

1. Typo in the snippet

As you can see in the screenshot, a snippet is provided as a sample, but unfortunately, a typo has.

Look at line 3, the curly bracket { has been used, datadogRum.init({.
But the } never has been stated in the snippet.

Here is the collect snippet.

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
    applicationId: 'hoge-hoge-hoge',
    clientToken: 'hoge-hoge-hoge',
    site: 'datadoghq.com',
    service:'temp',

    // Specify a version number to identify the deployed version of your application in Datadog 
    // version: '1.0.0',
    sampleRate: 100,
    replaySampleRate: 100,
    trackInteractions: true,
    defaultPrivacyLevel:'mask-user-input',
});

datadogRum.startSessionReplayRecording();

2. Disabled Session Replay

If you wanna disable session replay, you also have to be careful with this setup page. There is a toggle, Session Replay Enabled, which seems to allow the snippet to be edited to disable the function.

However, only this setting doesn't seem sufficient...😅 You also must set replaySampleRate: 0

References

Set replaySampleRate to 0 to stop collecting the RUM Session Replay plan which includes replays, resources, and long tasks.

That's why here is the collect snippet!

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
    applicationId: 'hoge-hoge-hoge-b2e3-40e049c84c81',
    clientToken: 'hoge-hoge-hoge-881b380180c1171d17',
    site: 'datadoghq.com',
    service:'temp',

    // Specify a version number to identify the deployed version of your application in Datadog 
    // version: '1.0.0',
    sampleRate: 100,
    replaySampleRate: 0,
    trackInteractions: true,
);

Happy Monitoring!